我正试图通过将鼠标悬停在一个div上来激活另外两个，从而链接CSS中的两个div元素
或
将两个不同的转换链接在一起，这样当我悬停在第三个元素上时，一个可以工作，另一个可以在2个div元素上工作。目前，我一次只能做一个，但不能同时做两个。
为了澄清，我需要使用CSS3 Transitions启动一系列事件。我需要在div 1上使用悬停来触发在div 2上的转换，然后在div 3上进行转换。我可以同时触发这两个，并在第三个上使用Delay来使链工作。目前只有div 2上的转换有效，但div 3上什么也没发生？
HTML
<html>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</html>
CSS
#1:hover + #2{Transition; }(works great!)
#1:hover + #3{Transition; } (No joy :( )
如果div总是兄弟姐妹，你可以尝试这样的方法：
HTML
<div class="div1">
Hello!
</div>
<div class="div2">
Hello!
</div>
<div class="div3">
Hello!
</div>
CSS
.div1 {
background:red;
}
.div1:hover {
background:blue;
}
.div1:hover ~ .div2 {
background:purple;
}
.div1:hover ~ .div3 {
background:thistle;
}
.div2 {
background:green;
}
.div3 {
background:yellow;
}
此处的工作代码笔：
http://codepen.io/alexbaulch/pen/xFkHj
更新：
我已经编辑了代码，以便根据注释，每个元素的悬停效果都不同。
.div1 { styling }
.div1:hover .div2 { styling }
.div1:hover .div3 { styling }
.div2 { styling }
.div3 { styling }
就这么简单，您可以添加所需的所有过渡。
如果我正确理解您的问题，您希望将样式应用于悬停的div的同级。以下是如何做到这一点：
HTML
<section>
<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
</section>
CSS
section {
display: inline-block; /* shrink wraps around inner divs */
}
/* select all divs that are not being hovered */
section:hover > div:not(:hover) {
...
}
/* select hovered div, if needed */
section:hover > div:hover {
...
}
这将适用于任何数量的兄弟姐妹，而不仅仅是3个！
工作小提琴：
http://jsfiddle.net/Surjikal/a7AG4/5/
备注
如果在div元素周围添加间距，则可以将鼠标悬停在section元素上，而无需将鼠标悬停到div上。这将导致section:hover > div:not(:hover)规则应用于section内的所有div元素。
演示：http://jsfiddle.net/Surjikal/jbXnj/
要解决此问题，您需要将div元素包装在一个容器中
示例：http://jsfiddle.net/Surjikal/B4MnD/
类似的东西？http://jsfiddle.net/mac1175/afGyu/
这个用法是：悬停伪类。
CSS
div {
width: 120px;
height: 120px;
border: 1px solid black;
background-color: skyblue;
transition: all 400ms ease-in-out;
}
div:hover {
background-color: red;
width: 300px;
}