将鼠标悬停在元素上并突出显示具有相同类的所有元素

Question

我在网页上有许多具有相同类的元素.当我将其中一个悬停时,我想强调所有这些元素.我怎么能在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>

Answer 1

使用纯CSS可以做到的最好是:

.classname:hover ~ .classname {
    background-color: yellow;
}

但是这只会突显所有兄弟姐妹在悬停元素classname 之后的课程.

您必须使用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");
        };
    }
};