html - 在多个元素上触发悬停

Question

#red, #blue {
    position: absolute;
    width: 100px;
    height: 100px;        
}
div:hover {
    background-color: yellow !important;
}
#red {
    background-color: red;
}
#blue {
    background-color: blue;
    top: 50px;
    left: 50px;
} 


<div id="red"></div>
<div id="blue"></div>

是否可以在不使用 javascript 的情况下在光标下的多个元素上触发悬停事件？如何在 this simple example 中将两个方 block 设为黄色？

Answer 1

Pretty little demo

好吧，所有这些答案都只是SWELL，所以我把我的答案扔进去只是为了kicks n giggles。

把它们裹在毯子里。将鼠标悬停在毯子上，两者都会变为黄色。

HTML

<div id="wrap">
    <div id="red"></div>
    <div id="blue"></div>
</div>

CSS

#red, #blue {
    position: absolute;
    width: 100px;
    height: 100px;
}
#red {
    background-color: red;
}
#blue {
    background-color: blue;
    top: 50px;
    left: 50px;
}
#wrap:hover > div {
    background-color: yellow !important;
}