CSS-only: onHover，用类X改变所有div的样式？
CSS-only: onHover，用类X改变所有div的样式？
提问于 2018-07-20 06:03:16
假设我有
<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)的项都有特定的背景色。
其他辅音&数字也是如此。只有使用CSS才能做到这一点吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-20 06:17:40
不，不幸的是，这在纯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...虽然不是最干净的解决方案，但它应该可以工作。
Stack Overflow用户
发布于 2018-07-20 06:18:05
我不确定我是否理解了，但是如果你想让带有“声音”类的元素有一个默认的背景颜色，当你将指针移动到上面时，改变颜色，那么就可以这样做了
.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; }Stack Overflow用户
发布于 2018-07-20 07:01:57
以下是使用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";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51432342
复制相关文章
相似问题