0

我的菜单上有三个项目：Galleries、Contact 和 About。当用户将鼠标悬停在我想要联系的画廊上并即将向下移动时，我在执行此操作时遇到了麻烦。有谁知道我应该怎么做？

这是我正在使用的 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;   
}

编辑：

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

4

2 回答 2

0

据我所知，这仅靠 CSS 是不可能的，因为您正在尝试调整兄弟元素。（您可以在这里找到类似的问题）

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

于 2013-09-25T07:57:25.483 回答
0

为此，在您当前的 HTML 下：

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

JS 小提琴演示。

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

我使用40px而不是40%因为百分比变化需要父母的已知高度，这在您的问题中没有确定。

顺便说一句，您的所有元素都有一个opacityof 0（在您发布的 HTML 中），除了divandbr元素，您的用户应该如何识别他们看不到的交互式组件？

于 2013-09-25T09:06:54.630 回答