Question

我有一些<p class="first">我使用css :hover更改悬停时的bg颜色：

<div id="row_1">
      <p class="first">first_1</p>
      <p class="first">first_2</p>
      <p class="first">first_3</p>
      <p class="first">first_4</p>
      <p class="first">first_5</p> 
</div>

和css：

.first:hover {
      background-color: #ddd;   
}

但是，我每次点击.click()时点击.first，点击一个不同的bg，其他bg设置为蓝色的一个：

$('.first').click(function() {
      $(this).css('background-color', '#ddd');
      $('.first').not(this).css('background-color', 'blue');
});

我感到困惑的是，在jQuery函数触发后:hover不再起作用了吗？

有谁知道为什么？更改bg后:hover不再起作用了吗？

Answer 1

<强> jsFiddle Demo

使用.css('background-color','blue')将元素的style属性设置为background-color:blue;，这比css悬停样式更具体。这就是为什么你不再看到悬停时的背景颜色变化。

对此的解决方法是使用类名称作为css样式，如此

.blueBg {
 background-color: blue;
}
.greyBg{
 background-color: #ddd;
}

然后在点击

上添加和删除这些类名

$('.first').click(function() {
 $('.blueBg').removeClass('blueBg');
 $(this).addClass('greyBg');
 $('.first').not(this).addClass('blueBg');
});

Answer 2

它是层叠样式表的级联部分。当您通过jquery添加样式时，它会将样式添加为内联样式，该样式将取代在头部或外部声明的任何样式。

我要做的不是改变背景颜色。为链接创建另一个名为active的样式。并添加/删除该类。这样你就不会添加任何内联样式。

css：jQuery css更改后悬停不起作用

2 个答案: