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

问题描述：

我有一个颜色框，所以当我在框上悬停时，边框颜色显现。现在我想点击框，边框颜色应该保持原样。它不应该删除时，你会从框中删除鼠标。如何在鼠标点击时修复边框颜色

我的CSS类

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


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

在上面的代码，后单击颜色是越来越设置，但是当我从箱子取出边境鼠标也越来越删除。

在单击Add'border'不仅'边境color'作为 '$（本）的.css（{ “边框颜色”： “红色”， “边框宽度”：” 2px“， ”border-style“：”solid“}）;' – SaiUnique

创建一个设置边界的类，并在'.click（）'添加类 - 这样您可以轻松地重用类并更改它，它是如果你想删除它也更容易 –

答

$(".Element").on("click",function(){ 
 
$(this).removeClass("Element").addClass("Elementfocus"); 
 
});

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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Element">Hello!</div>

感谢farhad ...它工作 –

答

您正在将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>

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

相关推荐