使用JavaScript设置背景颜色会破坏CSS悬停行为 [英] Setting background color with JavaScript breaks the CSS hover behavior
问题描述
我想创建一个菜单，其中当前选择（点击）元素具有不同于其他元素的背景颜色（我想使用JavaScript实现这一点）。我还使用CSS ：hover 伪类，通过突出显示悬停元素脱颖而出。但是，我遇到了一个奇怪的问题：当我用JavaScript设置任何元素的背景颜色，其CSS悬停行为不再工作。也就是说，我不能通过悬停它来突出显示元素。我已检查在Firefox和Chromium。这是jQuery和纯JavaScript的情况。
代码如下。我已经简化了很多，以缩小问题。首先尝试悬停任何菜单项，然后点击设置背景颜色链接，并再次悬停其中一个菜单元素。我期望的是当元素徘徊时，元素变红（＃f00），无论是否点击设置背景颜色按钮。 对于jsfiddle链接，转到底部。
Vanilla JavaScript：
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< style>
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;
}
< / style>
< title>背景颜色< / title>
< / head>
< body>
< p id =links>
< a href =＃>链接1< / a>
< a href =＃>链接2< / a>
< a href =＃>链接3< / a>
< a href =＃>链接4< / a>
< / p>
< a href =＃id =setbgcolor>设置背景颜色< / a>
< script>
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';
};
< / script>
< / body>
< / html>
jQuery：
code><！doctype html>
< html>
< head>
< meta charset =utf-8>
< script src =jquery-1.11.0.js>< / script>
< style>
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;
}
< / style>
< title>背景颜色< / title>
< / head>
< body>
< p id =links>
< a href =＃>链接1< / a>
< a href =＃>链接2< / a>
< a href =＃>链接3< / a>
< a href =＃>链接4< / a>
< / p>
< a href =＃id =setbgcolor>设置背景颜色< / a>
< script>
$（'a＃setbgcolor'）。click（function（）{
$（'p＃links a'）。css（'background-color'，'＃ff0'）;
}）;
< / script>
< / body>
< / html>
为方便起见，这里有jsfiddle.net链接：
Pure JavaScript： http://jsfiddle.net/5yQFM/1/
jQuery ： http://jsfiddle.net/5yQFM/
style 属性。 >属性比样式表中的规则更具体，因此总是会在级联。
不要直接更改元素上的CSS，而是通过更改元素所属的类并拥有预先准备好的样式表。
I'm trying to create a menu where the currently selected (clicked) element has a different background color than the other elements (I'm trying to achieve this using JavaScript). I also use the CSS :hover pseudoclass to make the hovered element stand out by highlighting it. However, I have encountered a strange problem: when I set the background color of any element with JavaScript, its CSS hover behavior no longer works. That is, I can't highlight the element by hovering it anymore. I have checked that in Firefox and Chromium. This is the case for both jQuery and plain JavaScript.
The code is below. I have simplified it a lot to narrow down the problem. First try hovering any of the menu items, then click the "Set background color" link and hover one of the menu elements again. What I expect is the element getting red (#f00) when hovered, regardless of whether the "Set background color" button was clicked or not. For jsfiddle links, go to the bottom.
Vanilla JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
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;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</p>
<a href="#" id="setbgcolor">Set background color</a>
<script>
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';
};
</script>
</body>
</html>
jQuery:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.0.js"></script>
<style>
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;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</p>
<a href="#" id="setbgcolor">Set background color</a>
<script>
$('a#setbgcolor').click(function() {
$('p#links a').css('background-color', '#ff0');
});
</script>
</body>
</html>
And here are jsfiddle.net links for the purpose of convenience:
Pure JavaScript: http://jsfiddle.net/5yQFM/1/
jQuery: http://jsfiddle.net/5yQFM/
The jQuery css() method maps onto the style property which maps onto the style attribute.
Rules inside a style attribute are more specific then rules in a stylesheet, so will always come after them in the cascade.
Instead of altering the CSS on the element directly, alter it by changing the classes the element belongs to and having a pre-prepared stylesheet.
这篇关于使用JavaScript设置背景颜色会破坏CSS悬停行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
