如何在鼠标单击时修复边框颜色

时间:2017-07-06 10:25:22

标签: jquery css border-color

我有一个彩盒,所以当我在盒子上盘旋时,会出现边框颜色。现在我想点击框,然后边框颜色应保持不变。当您从框中移除鼠标时,它不应被删除。

我的css课

.fill-color1{
            background:$workspace-fill-color2;
            &:hover{
                border:2px solid $work-border-color2;
            }
        }


$(`.fill-color${i}`).click(function () {
            $(this).css('border-color', 'red');
        });

在上面的代码中,点击后颜色已经设置但是当我从框边框中移除鼠标时也会被删除。

2 个答案:

答案 0 :(得分:0)

您要将border-color添加到没有border的框中。如果你将它悬停,它只有一个border

改变这个:

$(this).css('border-color', 'red');

到此:

$(this).css('border', '2px solid red');

此处示例:

$(`#test`).click(function() {
  $(this).css('border', '2px solid red');
});
#test:hover {
  border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  Hover and click me!
</div>

答案 1 :(得分:0)

&#13;
&#13;
Set shellOut = oShell.Exec("cmd.exe /C nslookup www.bbc.co.uk 8.8.8.8 2>&1")
&#13;
$(".Element").on("click",function(){
$(this).removeClass("Element").addClass("Elementfocus");
});
&#13;
div{
width:200px;
height:30px;
padding:10px;
}
.Element{
border:1px #E0E0E0 solid;
}
.Element:hover{
border:1px #e9e solid;
}
.Element:active{
border:2px blue solid;
}
.Elementfocus{
border:2px green solid;
}
&#13;
&#13;
&#13;