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

Answer 2

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

功能：

dbAdmin

并调用这样的函数：

.toggleClass()

我知道问题是陈旧的，但也许可以帮助别人：）

试试吧：

＆＃13;

$('.galery__img--fragrance').on('click', function() {
    $(this).toggleClass('extended');
});

＆＃13;

<head></head>

＆＃13;

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

2 个答案: