我在网页上有很多同一个类的元素.当我悬停其中一个时,我想强调所有这些元素.如何在CSS中做到这一点？
现在我有这个CSS：
p.un:hover { background-color:yellow;}
和我的HTML：
<div class="book">
<div class="page left">
<p class="un">Karen…</p>
</div>
<div class="page right">
<p class="un">Karen ne se retourne pas. Mme Tilford reste là,apparemment confuse et abattue.</p>
</div>
解决方法
使用纯CSS最好的方法是：
.classname:hover ~ .classname {
background-color: yellow;
}
但是,这只会突出显示所有带有类别名的兄弟姐妹.
您必须使用JavaScript来突出显示所有元素;
var elms = document.getElementsByClassName("classname");
var n = elms.length;
function changeColor(color) {
for(var i = 0; i < n; i ++) {
elms[i].style.backgroundColor = color;
}
}
for(var i = 0; i < n; i ++) {
elms[i].onmouSEOver = function() {
changeColor("yellow");
};
elms[i].onmouSEOut = function() {
changeColor("white");
};
}
如果您有多个课程,并希望将其推广,请使用以下内容：
var classes = ["one","two","three"]; //list of your classes
var elms = {};
var n = {},nclasses = classes.length;
function changeColor(classname,color) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
for(var k = 0; k < nclasses; k ++) {
var curClass = classes[k];
elms[curClass] = document.getElementsByClassName(curClass);
n[curClass] = elms[curClass].length;
var curN = n[curClass];
for(var i = 0; i < curN; i ++) {
elms[curClass][i].onmouSEOver = function() {
changeColor(this.className,"yellow");
};
elms[curClass][i].onmouSEOut = function() {
changeColor(this.className,"white");
};
}
};
