在jquery之后，悬停不起作用

Question

$('#list').find('li').click(function(){
   var x = $(this).attr('id');
   $('#list').find('li').css({'background':'rgb(42,43,44)'});
   $('#'+ x).css({'background':'rgb(204,51,51)'});
});

这行得通...

但在此之后悬停不起作用。我该怎么做才能解决这个问题？

HTML：

<ul id="list">
  <li id="prod_info">Product information</li>
  <li id="additional_info">Aditional information</li>
  <li id="reviews">Reviews</li>
  <li id="share">Share</li>
</ul>
--------

-- css：

#list li:hover
{
    background: rgb(204,51,51);
    cursor: pointer;
    transition:0.6s;
}

有什么想法吗？

Answer 1

这是因为内联样式优先于您的 #list li:hover 样式。理想情况下，所有样式（背景颜色）都应该在 CSS 中完成，您可以使用 JS 添加类并让 CSS 接管。

如果您仍然希望它在淡出时也进行转换，请记住将您的 transition 保持为常规样式而不是 :hover。

这个怎么样：

DEMO

JS

$('#list li').click(function(){
    $('#list li').removeClass('active');
    $(this).addClass('active');
});

CSS

#list li {
    background:rgb(42,43,44);
    transition:background ease 0.6s;
}

#list li.active,
#list li:hover
{
    background: rgb(204,51,51);
    cursor: pointer;
}

Answer 2

与使用!important 不同，为什么不直接解决问题？

jsFiddle example

我重写了 jQuery：

$('#list li').click(function () {
    $(this).addClass('highlighted').siblings().removeClass('highlighted').addClass('selected');
});

CSS：

.selected {
    background:rgb(42, 43, 44);
}
#list li:hover, .highlighted {
    background: rgb(204, 51, 51);
    cursor: pointer;
    transition:0.6s;
}

Answer 3

因为

#list li:hover
{
    background: rgb(204,51,51);

将被点击后jQuery赋予元素的style=""属性覆盖。

您可能要考虑的一个可能的解决方案是这样的

#list li:hover
{
    background: rgb(204,51,51) !important;

在悬停时将 !important 添加到 CSS 背景属性。通常不鼓励这样做，因此开发人员必须开发设计更好的模板。但在这种特殊情况下，它符合您的需求

DEMO

更新

Example working without important.

这样更好。

$('#list').find('li').click(function(){
    var x = $(this).attr('id');
    $('#list').find('li').addClass('other');
    $('#'+ x).addClass('clicked');
});

如你所见，我使用了addCass，而现在 jQuery 没有为元素赋予 style 属性，因此没有任何内容被覆盖。

当然，还有新的 css

#list li:hover, #list li.clicked
{
    background: rgb(204,51,51);
   cursor: pointer;
    transition:0.6s;
}

.other {
    background: rgb(42,43,44);
}