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

wtzytmuj 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(140)

我有一个彩色框，所以当我悬停在框的边框颜色是越来越出现。现在我想点击框，然后边框颜色应该保持原样。它不应该得到删除时，你会从框中删除鼠标。
我的scss：

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

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

在上面的代码中，单击后颜色会设置，但当我从框中删除鼠标时边框也会删除。

css

来源：https://stackoverflow.com/questions/44946318/how-to-fix-border-color-on-mouse-click

2条答案

按热度按时间

b4qexyjb1#

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

赞(0）回复(0）举报 2023-01-18

wz3gfoph2#

您正在将border-color添加到没有border的框中。如果您将其悬停，则它只有border。
更改此内容：

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

改为：

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

示例如下：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-01-18

我来回答

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

2条答案

相关问题

热门标签

最新问答