悬停在元素上并突出显示具有相同类的所有元素 [英] Hover on element and highlight all elements with the same class

问题描述

我在网页上有许多相同类别的元素。我想突出所有这些元素，当我悬停其中一个。

$ b

现在，我有了这个CSS：

code> p.un：hover {background-color：yellow;}

：

 < 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。 < / p>< / p> 
< / div> 
  

解决方案

  .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  elms [i] .style.backgroundColor = color; 
} 
} 
 for（var i = 0; i  elms [i] .onmouseover = function（）{
 changeColor（yellow）; 
}; 
 elms [i] .onmouseout = function（）{
 changeColor（white）; 
}; 
} 
  

如果你有多个类并想要概括一下，

  var classes = [one，two，three]; //你的类的列表
 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  var curClass = classes [k] 
 elms [curClass] = document.getElementsByClassName（curClass）; 
 n [curClass] = elms [curClass] .length; 
 var curN = n [curClass]; 
 for（var i = 0; i  elms [curClass] [i] .onmouseover = function（）{
 changeColor（this.className，黄色）; 
}; 
 elms [curClass] [i] .onmouseout = function（）{
 changeColor（this.className，white）; 
}; 
} 
}; 
  

I have many elements with the same class on a web page. I would like to highlight all these elements when I hover one of them. How can I do that in CSS?

Right now, I have this CSS:

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

And my 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>

解决方案

The best you can do using pure CSS is this:

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

But this only highlights all siblings with a class classname after the hovered element.

You have to use JavaScript to highlight all elements;

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

If you have multiple classes and want to generalize this, use something like this:

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

这篇关于悬停在元素上并突出显示具有相同类的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！