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的onHover上，我希望所有具有vocal类（Item A和Item E）的项目都具有特定的背景颜色。 item E的相同点：悬停item E时，item E和item A会更改背景颜色。

其他辅音和数字也一样。仅 CSS 可能会发生这种情况吗？

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”类的元素具有默认的背景色，则当您将指针移到上方，更改颜色时，会采用这种方式

.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：onHover，使用类X更改所有div的样式吗？

3 个答案:

但是