CSS-only: onHover, 用class X改变所有div的样式？

Question

说我有

<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 class（Item A 和 Item E）的项目都具有特定的背景颜色。 item E 相同：悬停在 item E 时，item E 和 item A 应该更改背景颜色。

其他辅音和数字也一样。 CSS only?

有可能吗？

Answer 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...

虽然不是最干净的解决方案，但它应该有效。

Answer 2

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

.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; }

Answer 3

这是使用 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";
}

CSS-only: onHover, 用class X改变所有div的样式？

CSS-only: onHover, change style of all divs with class X?

html

css

sass

less

但是