仅限 CSS：onHover，更改所有具有 X 类的 div 的样式？答案

【问题标题】：CSS-only: onHover, change style of all divs with class X?仅限 CSS：onHover，更改所有具有 X 类的 div 的样式？
【发布时间】：2018-07-20 07:09:36
【问题描述】：

说我有

<div class="vocal"> Item A </div>
<div class="consonant"> Item B </div>
<div class="consonant"> Item C </div>
<div class="consonant"> Item D </div>
<div class="vocal"> Item E </div>
<div class="num"> Item 1 </div>
<div class="num"> Item 2 </div>
<div class="num"> Item 3 </div>

在Item A 的悬停上，我希望所有具有vocal 类（Item A 和Item E）的项目都具有特定的背景颜色。 item E 也一样：悬停时 item E、item E 和 item A 应该改变背景颜色。

其他辅音和数字也是如此。 CSS only 是否可以实现类似的操作？

【问题讨论】：

标签： html css sass less

【解决方案1】：

不，很遗憾，纯 CSS 无法做到这一点。

然而

使用 javascript 可以做到这一点。你可以这样做：

HTML：

<div class="vocal" onmouseover="show('vocal')" onmouseout="hide('vocal')"> Item A </div>
<div class="vocal" onmouseover="show('vocal')" onmouseout="hide('vocal')"> Item B </div>
etc...

Javascript：

function show(className) {
    var elements = document.getElementsByClassName(className);
    for(var i = 0; i < elements.length; i++)
    {
       elements.item(i).classList.add(className + "-hover");
    }
}
function hide(className) {
    var elements = document.getElementsByClassName(className);
    for(var i = 0; i < elements.length; i++)
    {
       elements.item(i).classList.remove(className + "-hover");
    }
}

CSS：

.vocal {
    background: white;
}
.vocal-hover {
    background: red;
}
etc...

虽然不是最干净的解决方案，但它应该可以工作。

【讨论】：

【解决方案2】：

这是使用 JS 的另一种（更短的）方法：

这是 HTML：

<div class="vocal" onmouseover="show()" onmouseout="hide()"> Item A </div>
<div class="vocal" onmouseover="show()" onmouseout="hide()"> Item B </div>

这里是 JS

let x = document.getElementsByClassName("vocal");

const show = () => {
  x[0].style.background = "red";
  x[1].style.background = "red";
}

const hide = () => {
  x[0].style.background = "none";
  x[1].style.background = "none";
}

【讨论】：

【解决方案3】：

我不确定我是否理解，但是如果您希望具有“声乐”类的元素具有默认背景颜色，则当您将指针移到上方时，更改颜色，然后就是这样

.vocal{

  background:red;
  
}
.vocal:hover ~ .vocal, .vocal:hover{

  background:blue;

}

<div class="vocal"> Item A </div>
<div class="consonant"> Item B </div>
<div class="consonant"> Item C </div>
<div class="consonant"> Item D </div>
<div class="vocal"> Item E </div>
<div class="num"> Item 1 </div>
<div class="num"> Item 2 </div>
<div class="num"> Item 3 </div>

.vocal:hover{ background:blue; }

【讨论】：

OP 还希望具有相同类的其他元素，而不仅仅是那些悬停在上面的元素，以更改背景颜色。这只会改变悬停在上面的元素。
我试过了，但是只能降序。