触发器悬停在多个元素上

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中将两个方块都变成黄色？

Answer 1

Pretty little demo

所有这些答案都只是 SWELL 所以我只是因为踢得很傻笑而把我扔掉了。

将它们包裹在毯子里。将毯子悬停在毯子上，你将两者都改为黄色。

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

Answer 2

你可以这样做

#red:hover {
    background-color: yellow !important;
}

#red:hover + #blue {
    background-color: yellow !important;
}
#blue:hover + #red {
        background-color: yellow !important;
}

JSFiddle

#red:hover + #blue // triggers hover for another element

Answer 3

因为您希望能够选择前面的元素，所以不能单独使用CSS。 CSS在树上向下，而不是在树上。你可以用JS做到这一点。

http://jsfiddle.net/x7cWq/1/

$('div').hover(function() {
    $('div').addClass('yellow');
});

$('div').mouseleave(function() {
    $('div').removeClass('yellow');
});

使用CSS：

div:hover, 
.yellow {
    background-color: yellow !important;
}