悬停时隐藏 div 的子元素 [英] Hide the child element of a div on hover

问题描述

有没有办法让这个工作.我想将鼠标悬停在外部 div 上并隐藏子元素而不使用 javascript.这样的事情可能吗?

.fullwrap:nth-child(1):hover {显示:无；}

解决方案

要隐藏子元素，您需要这样的结构:

#parent:hover .yourchild {显示:无；}

其中 #parent 是您的外部 div 并具有 :hover 操作，然后您只需匹配子元素以使其隐藏.

在这种情况下，我猜你有这样的结构:

<div>一个</div><div>二</div><div>三</div>

然后为了隐藏一个孩子，你可以这样做:

.fullwrap:hover :nth-child(1) {显示:无；}

检查这个演示 http://jsfiddle.net/55TWN/

Is there a way to make this work. I want to hover over the outer div and hide a child element without using javascript. Is something like this possible?

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

解决方案

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

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

Where #parent is your outer div and has the :hover action, then you just match the child element to make it hide.

In this case I guess you have some structure like this:

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

Then to hide a child you can do some like this:

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

Check this Demo http://jsfiddle.net/55TWN/

这篇关于悬停时隐藏 div 的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！