假设我有
<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才能做到这一点吗?
发布于 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...
虽然不是最干净的解决方案,但它应该可以工作。
发布于 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; }
发布于 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";
}
https://stackoverflow.com/questions/51432342
复制相似问题