悬停时的 CSS(使用预结构化 CSS)

Question

我是新来的，我试着在现有论坛上找到我的问题的答案。我尝试了一些但无法解决问题。

我想让悬停效果在这个预结构代码上的鼠标移开后保持不变。

有人有想法吗？

非常感谢!!!

#search_block_top {
    position:absolute;
    right: 0;
    top: 120px;
    z-index: 99;
}
#search_block_top p {padding:0;}
#search_block_top #search_query_top {
    border: medium none;
    height: 31px;
    padding: 0;
    width: 1px;
    background:#FFF;
    box-shadow:none;
    line-height: 33px\9;
    -moz-transition: width 0.5s ease 0s;
    -o-transition: width 0.5s ease 0s;
    -ms-transition: width 0.5s ease 0s;
    -webkit-transition: width 0.5s ease 0s;
}
#search_block_top .button {
    background: url("img/bg-search.png") no-repeat scroll right center transparent;
    border: medium none;
    border-radius: 0 0 0 0;
    height: 33px;
    line-height: 33px;
    margin: 10px -5px 0 0;
    padding: 0;
    text-indent: -9999px;
    width: 57px;

}
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
    -moz-transition: width 0.5s ease 0s;
    -o-transition: width 0.5s ease 0s;
    -ms-transition: width 0.5s ease 0s;
    -webkit-transition: width 0.5s ease 0s;
    width: 130px;
    padding-left:10px;
    margin: 10px 0 0;
    background:#fff;
    border: 1px solid #CCC;
}
#searchbox{}
#searchbox label{
    text-indent: -9999px;
}
#searchbox #search_query_block{
    border: 1px solid #CCCCCC;
    -webkit-border-radius:3px !important;
    -moz-border-radius:3px !important;
    border-radius:3px !important;
    height: 18px;
    margin-top:10px;
}
#searchbox #search_button{padding: 1px 4px;}

Answer 1

@badAdviceGuy 在这一点上是正确的。在你悬停之后，纯 css 无法使更改保留在那里。

但是，如果您确实想涉足 jQuery 领域，它看起来像这样:

$(document).on('mouseenter', '#hover-element', function(){
    $(this).addClass('highlight');
});

然后您只需将要进行的任何更改添加到 css 中的高亮类，瞧!

希望对你有帮助