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
{
    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);
}

Answer 2

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

另外请记住，如果您的transition仍然希望它在淡出时也能过渡，那么请将:hover保持为常规样式$('#list li').click(function(){ $('#list li').removeClass('active'); $(this).addClass('active'); });。

这个怎么样：

DEMO

<强> JS

#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;
}

<强> CSS

{{1}}

Answer 3

与使用!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;
}

在jquery之后，不起作用

但在此之后无法悬停。我该怎么做才能解决这个问题？

3 个答案: