22

我在网页上有许多具有相同类的元素。当我悬停其中一个元素时，我想突出显示所有这些元素。我怎样才能在 CSS 中做到这一点？

现在，我有这个 CSS：

p.un:hover { background-color:yellow;}

还有我的 HTML：

<div class="book">
  <div class="page left">
    <p class="un">Karen…&lt;/p>
  </div>
   <div class="page right">
     <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p>
   </div>
4

2 回答 2

20

使用纯 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");
        };
    }
};
于 2012-10-08T17:49:09.120 回答
3

感谢克里斯的回答。我用他的代码编写了一个简单的函数来完成这项工作。您可以将函数放置在中，<head></head> 但您需要在页面加载后调用它，即放置在正文的末尾。colorout 是背景色

功能：

function hoverByClass(classname,colorover,colorout="transparent"){
    var elms=document.getElementsByClassName(classname);
    for(var i=0;i<elms.length;i++){
        elms[i].onmouseover = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor="orange";//colorover;
            }
        };
        elms[i].onmouseout = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor=colorout;
            }
        };
    }
}

并像这样调用函数：

hoverByClass("un","yellow");
hoverByClass("un2","pink");

我知道这个问题很老，但也许可以帮助别人:)



在这里试试： 

function hoverByClass(classname,colorover,colorout="transparent"){
	var elms=document.getElementsByClassName(classname);
	for(var i=0;i<elms.length;i++){
		elms[i].onmouseover = function(){
			for(var k=0;k<elms.length;k++){
				elms[k].style.backgroundColor=colorover;
			}
		};
		elms[i].onmouseout = function(){
			for(var k=0;k<elms.length;k++){
				elms[k].style.backgroundColor=colorout;
			}
		};
	}
}
hoverByClass("un","yellow");
hoverByClass("un2","pink");
<div class="book">
  <div class="page left">
    <p class="un">Karen…&lt;/p><p class="un2">Karen2…&lt;/p>
  </div>
  <div class="page right">
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p><p class="un2">Karen2 ne se retourne pas. Mme Tilford2 reste là, apparemment confuse et abattue.</p>
  </div>
</div>

于 2016-07-21T10:18:54.937 回答