2

我正在尝试通过将div鼠标悬停在一个元素上来div激活其他2 个元素来链接 CSS 中的 2 个元素

或者

div将 2 个不同的过渡链接在一起，当我将鼠标悬停在第三个元素上时，一个可以工作，另一个可以在 2 个元素上工作。目前，我一次只能做一个，但不能同时做两个。

澄清一下，我需要使用 CSS3 过渡启动一系列事件。我需要使用 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 :( )
4

4 回答 4

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

在这里工作的codepen：

http://codepen.io/alexbaulch/pen/xFkHj

更新：

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

于 2013-08-05T17:46:28.867 回答
0 
.div1 { styling }
.div1:hover .div2 { styling }
.div1:hover .div3 { styling }
.div2 { styling }
.div3 { styling }

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

于 2013-08-05T17:29:36.627 回答
0

如果我正确理解您的问题，您想将样式应用于悬停的兄弟姐妹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)应用于.divsection

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

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

于 2013-08-05T17:53:32.060 回答
-1

像这样的东西？ http://jsfiddle.net/mac1175/afGyu/

这个使用 :hover 伪类。

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;
}
于 2013-08-05T17:34:03.457 回答