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

Question

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

我的CSS类

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


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

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

Answer 1

$(".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>

Answer 2

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