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

【问题标题】：how to fix border color on mouse click如何在鼠标单击时修复边框颜色
【发布时间】：2017-07-06 10:25:22
【问题描述】：

我有一个颜色框，所以当我将鼠标悬停在该框上时，边框颜色会出现。现在我想单击该框，然后边框颜色应保持原样。当您将鼠标从框中移除时，它不应该被移除。

我的 CSS 类

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


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

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

【问题讨论】：

点击添加border不仅border-color为$(this).css({"border-color": "red", "border-width":"2px", "border-style":"solid"});
创建一个设置边框的类并在.click() 上添加该类 - 这样您就可以轻松地重用该类并对其进行更改，如果您想删除它也更容易

标签： jquery css border-color

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：