代码之家 › 专栏 › 技术社区 › R. Kohlisch

仅限于CSS:OnHover,是否用类X更改所有div的样式?

less sass css html

R. Kohlisch · 技术社区 · 8 年前

说我有

<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 类( 项目A 和; Item E )有一定的背景色。同样适用于 item E :悬停时 项目E , 项目E 和; item A 应该更改背景色。

其他辅音和数字也是如此。这样的事情有可能发生吗 仅CSS ?

3 回复 | 直到 8 年前

Alex 8 年前

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

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

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

SakoBu 8 年前

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

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

Frankely Garcia 8 年前

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