使用JavaScript设置背景颜色会破坏CSShover行为

我正在尝试创建一个菜单，其中当前所选（单击）元素具有与其他元素不同的背景颜色（我正在尝试使用JavaScript实现此目的）。 我还使用CSS :hover伪类来突出显示hover元素。 但是，我遇到了一个奇怪的问题：当我使用JavaScript设置任何元素的背景颜色时，其CSShover行为不再有效。 也就是说，我不能再通过hover它突出显示该元素。 我已经在Firefox和Chromium中检查过了。 这是jQuery和普通JavaScript的情况。

代码如下。 我已经简化了很多来缩小问题的范围。 首先尝试hover任何菜单项，然后单击“设置背景颜色”链接并再次hover其中一个菜单元素。 无论是否单击“设置背景颜色”按钮，我期望hover时元素变红（＃f00）。 对于jsfiddle链接，请转到底部。

香草JavaScript：

      p#links a { display: inline-block; width: 80px; height: 22px; line-height: 22px; background-color: #00f; color: #fff; text-decoration: none; text-align: center; font-family: sans-serif; } p#links a:hover { background-color: #f00; }     
 Link 1 Link 2 Link 3 Link 4 
 Set background color  document.getElementById('setbgcolor').onclick = function() { var p = document.getElementById('links'); var elements = p.getElementsByTagName('a'); for (var i = 0; i < elements.length; i++) elements[i].style.backgroundColor = '#ff0'; };    

jQuery的：

       p#links a { display: inline-block; width: 80px; height: 22px; line-height: 22px; background-color: #00f; color: #fff; text-decoration: none; text-align: center; font-family: sans-serif; } p#links a:hover { background-color: #f00; }     
 Link 1 Link 2 Link 3 Link 4 
 Set background color  $('a#setbgcolor').click(function() { $('p#links a').css('background-color', '#ff0'); });    

为方便起见，这里有jsfiddle.net链接：
纯JavaScript： http ： //jsfiddle.net/5yQFM/1/
jQuery： http ： //jsfiddle.net/5yQFM/

Answer 1

jQuery css()方法映射到style属性，该属性映射到style属性。

style属性中的规则比样式表中的规则更具体，因此总是在级联中跟在它们之后。

不是直接在元素上更改CSS，而是通过更改元素所属的类并使用预先准备好的样式表来更改它。

Answer 2

如何通过添加类来保持CSS中的样式而不是Javascript中的样式 ？

所以这一行：

 elements[i].style.backgroundColor = '#ff0'; 

改成

 elements[i].className = 'myClassForBackgrounds'; 

或者在jQ版本中

 $('p#links a').css('background-color', '#ff0'); 

至 ：

 $('p#links a').addClass('myClassForBackgrounds'); 

---

这样你可以像往常一样设置你的:hover

 #links a:hover, .myClassForBackgrounds:hover { background-color:#ff0; } 

Answer 3

你需要在hover时使用!important ，基本上它会增加它的优先级。

试试这个，

 p#links a:hover { background-color: #f00 !important; } 

DEMO

---

正如Quentin所说它看起来像一个脏的，所以在这种情况下我们可以利用类优先级概念。

HTML：

 Link 1 Link 1 

CSS：

 .normal { background-color: blue; } .abnormal{ background-color: yellow; } .normal:hover { background-color: #f00; } 

JS：

 $('p#links a').attr('class', 'abnormal normal'); 

DEMO非肮脏的一个

Answer 4

只是为了一个更简单的答案，能够重新启用css规则只需要在颜色和“”之间切换，所以

 document.getElementById("id").style.backgroundColor = "rgb(255, 125, 15)"; 

如果元素还没有通过javascript着色。 现在，如果您的元素已经着色，代码将如下所示：

 document.getElementById("id").style.backgroundColor = ""; 

这会重新启用CSS，这样你的选择器就可以工作了。