在鼠标悬停时隐藏div元素的子元素

Question

有没有一种方法使这个生效。我想在悬停外部的div时隐藏一个子元素，而不使用JavaScript。类似这样的东西是否可行？

.fullwrap:nth-child(1):hover { 
    display: none; 
}

- riotgear

---

provide your html code also - Pranav C Balan

从技术上讲，是可以的。您可以提供一个 jsFiddle 或者 HTML 代码吗？关于您隐藏它，您希望保留它原来所占的空间吗？还是像元素从未存在一样处理？visibility: hidden 可以将其隐藏。 - Ian Ryan Clarke

工作的Fiddle - juanvan

谢谢，这是一个很棒的视觉效果！ - riotgear

Answer 1

为隐藏子元素，您需要一个类似这样的结构：

To hide a child element you need an structure like this:

#parent:hover .yourchild {
   display:none;
}

如果你的外层 div 使用了 :hover 动作，那么可以通过匹配子元素使其隐藏，其中 #parent 是你的外层 div。

在这种情况下，我猜你的结构类似于这样：

<div class="fullwrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div> 

隐藏子元素可以这样做：

.fullwrap:hover :nth-child(1) { 
  display: none; 
}

请查看此示例 http://jsfiddle.net/55TWN/

- DaniP

---

非常有帮助！谢谢您，先生。 - justdoingmyjob