Question

我试图通过将鼠标悬停在一个div上来激活其他2个div

OR

将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 :( )

Answer 1

如果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

<强>更新

我编辑了代码，因此根据评论，每个元素的悬停效果都不同。

Answer 2

.div1 { styling }
.div1:hover .div2 { styling }
.div1:hover .div3 { styling }
.div2 { styling }
.div3 { styling }

就这么简单，您可以添加所需的所有转换。

Answer 3

如果我正确理解您的问题，您希望将样式应用于悬停的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)规则应用于div内的所有section元素。

示范：http://jsfiddle.net/Surjikal/jbXnj/

要解决此问题，您需要将div元素包装在容器中示例：http://jsfiddle.net/Surjikal/B4MnD/

Answer 4

这样的东西？ 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;
}

具有多个DIVS的CSS3多个转换

4 个答案:

HTML

CSS

注意

CSS