将元素悬停在其他元素上时

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是不可能的，因为您正在尝试调整同级元素。 （您可以在此处找到类似的问题）

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

Answer 2

为此，请使用您当前的HTML：

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

JS小提琴演示 。

这使用通用同级（ ~ ）组合器来标识#nav:hover元素的较晚同级（ 并非所有同级），并对它们进行动画处理。

我使用40px而不是40%因为更改百分比需要与父级保持已知高度，这在您的问题中没有得到确认。

顺便说一句，除div和br元素外，所有元素的opacity为0 （在您发布的HTML中），您的用户应该如何识别他们看不到的交互式组件？