Question

我在菜单上有三个项目：画廊，联系人和关于。当用户在画廊上盘旋时，我想要联系并即将向下移动，我无法做到这一点。有人知道我应该做什么吗？

以下是我使用的HTML：

<div class="nav" align="center">  
<a style="opacity: 0;" class="nav_item" id="galleries">GALLERIES</a><br><br><br>
<div id="lower">
<a style="opacity: 0;" class="nav_item" id="about">ABOUT</a><br><br><br>
<a style="opacity: 0;" class="nav_item" id="contact">CONTACT</a>
</div>
</div>

这是CSS：

#galleries:hover #lower{
top:40%;
-webkit-transition-property:top;
-webkit-transition-duration:0.5s;   
}

修改

我解决了这个问题！谢谢大家的帮助！

Answer 1

据我所知，这与CSS无关，因为你正在尝试调整兄弟元素。（您可以找到类似的问题here）

如果我需要这样做，我会使用Javascript onmouseover和onmouseout事件，或使用jQuery（这将简化您的代码）。

Answer 2

要实现这一点，请在您当前的HTML下：

#nav:hover ~ #lower a {
    top: 40px;
    -webkit-transition: top 0.5s linear;
}

JS Fiddle demo

这使用通用兄弟（~）组合子来识别#nav:hover元素的后来兄弟（不所有兄弟姐妹），并为它们设置动画。

我使用的是40px而不是40%，因为百分比更改需要父级的已知高度，这在您的问题中未找到。

顺便提一下，除了opacity和0元素之外，您的所有元素都有div br（在您发布的HTML中），您的用户如何应该识别一个他们看不到的互动组件？

当元素悬停在其上时移动其他元素

2 个答案: