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

【问题标题】：Hover on element and highlight all elements with the same class将鼠标悬停在元素上并突出显示具有相同类的所有元素
【发布时间】：2016-08-18 22:33:05
【问题描述】：

我在网页上有许多具有相同类的元素。当我悬停其中一个元素时，我想突出显示所有这些元素。如何在 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>

【问题讨论】：

你需要使用 javascript..
CSS主要是父->子关系。有兄弟选择器 (css-tricks.com/child-and-sibling-selectors) 但这仅在元素处于同一级别时才有效，我们需要查看您的设置。
在该设置中，嵌套的段落标签不能仅使用 CSS 相互触发。那将需要 javascript。
我应该在哪里寻找如何升级 javascript？
@JustinD。请参阅我的更新答案。

标签： css

【解决方案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");
        };
    }
};

【讨论】：

想象一下，如果实施主题选择器，会有多少人在嘴里冒泡：!.classname ~ .classname:hover, .classname:hover ~ .classname - 好吧，也许根本不会。
它不起作用。我把你的代码放在一个脚本标签中：<script type="text/javascript"> var elms = document.getElementsByClassName("un"); 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"); }; } </script>.
我需要在这个设置中使用 CSS 吗？
@JustinD。你确定你的<script> 标签是在你的.un 元素的定义之后？只要确保它位于body 的底部即可。
如果我有很多类名（un、deux、trois、quatre 等），有没有比复制和更改类名更快的方法来设置 javascript？

【解决方案2】：

感谢克里斯的回答。我用他的代码编写了一个简单的函数来完成这项工作。您可以将函数放在<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…</p><p class="un2">Karen2…</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>

【讨论】：