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");
        };
    }
};