移动其他元素当一个元素被悬停时

我在菜单上有三个项目：画廊，联系人和关于。当用户悬停在画廊上时，我想要联系并即将向下移动，而且我无法做到这一点。任何人都知道我该怎么办？移动其他元素当一个元素被悬停时

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

编辑：

我固定的问题！感谢大家的帮助！

来源

2013-09-25 Alex A

您当前的CSS存在的问题是#lower元素不是#galleries元素的子元素。 – mavrosxristoforos

Seconding @mavrosxristoforos：尝试将：悬停在.nav上（如果需要，给它一个id） – pintxo

为什么不在'＃galleries'上设置“margin-bottom”（假设你的页面以这种方式执行所述操作... – gvee

据我所知，这是不可能的只用CSS，因为你正在尝试调整兄弟元素。（你可以找到一个类似的问题here）

如果我需要做到这一点，我将使用JavaScript onmouseover和onmouseout事件，或使用jQuery（这将简化代码很多）这样做。

来源

2013-09-25 07:57:25 mavrosxristoforos

请更新您的答案，而不是在此发布，让其他人看到它，太。 – mavrosxristoforos

为了实现这一目标，当前的HTML下：

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

JS Fiddle demo。

这将使用普通的兄弟姐妹（~）组合子识别#nav:hover元素的后兄弟姐妹（不所有的兄弟姐妹），以及动画他们。

我已经使用40px而不是40%，因为百分比变化需要来自父级的已知高度，在您的问题中未标识。

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

来源

2013-09-25 09:06:54

移动其他元素当一个元素被悬停时

回答

相关问题