【问题标题】：Trigger hover on multiple elements在多个元素上触发悬停
【发布时间】：2014-01-31 06:36:14
【问题描述】：

#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 中的两个方块都变黄？

【问题讨论】：

标签： html css hover overlay

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：

我的回答类似（我认为你比我略胜一筹），但我意识到#blue:hover + #red 不适用于给定的标记，因为蓝色不会出现在红色之前。不幸的是，没有针对此的纯 CSS 修复。
@Faust 你是对的。我也错过了，谢谢指出我的错误。

【解决方案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;
}

【讨论】：

哇，我的答案是唯一有效的，但我投了反对票。我说的是实话：CSS 不能选择前面的元素。 OP 询问是否可以不使用 JS：答案是 no。