rhi*_*ino 2 javascript css jquery hover
我正在尝试创建一个菜单,其中当前所选(单击)元素具有与其他元素不同的背景颜色(我正在尝试使用JavaScript实现此目的).我还使用CSS :hover伪类通过突出显示悬停元素.但是,我遇到了一个奇怪的问题:当我使用JavaScript设置任何元素的背景颜色时,其CSS悬停行为不再有效.也就是说,我不能再通过悬停来突出显示该元素.我已经在Firefox和Chromium中检查过了.这是jQuery和纯JavaScript的情况.
代码如下.我已经简化了很多来缩小问题的范围.首先尝试悬停任何菜单项,然后单击"设置背景颜色"链接并再次悬停其中一个菜单元素.无论是否单击"设置背景颜色"按钮,我期望悬停时元素变红(#f00).对于jsfiddle链接,请转到底部.
香草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>
以下是jsfiddle.net链接以方便使用:
纯JavaScript:http://jsfiddle.net/5yQFM/1/
jQuery:http://jsfiddle.net/5yQFM/
如何通过添加类来保持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; }
你需要!important在悬停时使用，基本上它会增加它的优先级。
尝试这个，
p#links a:hover {
background-color: #f00 !important;
}
正如 Quentin 所说，它看起来很脏，所以在这种情况下，我们可以利用类优先级概念。
HTML：
<a class='normal' href="#">Link 1</a>
<a class='normal' href="#">Link 1</a>
CSS：
.normal { background-color: blue; }
.abnormal{ background-color: yellow; }
.normal:hover { background-color: #f00; }
JS：
$('p#links a').attr('class', 'abnormal normal');