如何修复鼠标单击时的边框颜色
how to fix border color on mouse click
我有一个彩盒,所以当我将鼠标悬停在彩盒上时,边框颜色就会出现。现在我想单击该框,然后边框颜色应保持原样。当您从盒子中取出鼠标时,它不应该被移除。
我的cssclass
.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
。如果你悬停它,它只有一个 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>
$(".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>
我有一个彩盒,所以当我将鼠标悬停在彩盒上时,边框颜色就会出现。现在我想单击该框,然后边框颜色应保持原样。当您从盒子中取出鼠标时,它不应该被移除。
我的cssclass
.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
。如果你悬停它,它只有一个 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>
$(".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>