的CSS visibility属性DIV1徘徊另一个DIV（DIV2）

我躲在带班的.text一个div的CSS visibility属性DIV1徘徊另一个DIV（DIV2）

div.text{ 

visibility:hidden; 
     }

这个div被另一个分度类.col3

<div class="col3"> 
<div class="image-box"> 
<div class="text"> test </div> 
</div> 
</div>

包围我想的可视性更改为“可见”当我将鼠标悬停COL3

我试图

.col3:hover + div.text { 

visibility:visible; 
}

然而，它似乎不工作这种方式。奇怪的是，当我这样做

.image-box:hover + div.text{ 
visibility:visible; 
    }

它确实显示文本的div当我悬停图像盒，但那不是我想要的，我希望它表明，当我将鼠标悬停周围的div .... ..

任何帮助，欢迎...

来源

2013-10-28 Jef Rechards

这应该工作：

.col3:hover div.text { 
    visibility:visible; 
}

使用该+选择的是不正确的，它的目标可怕的元素遵循第一个元素。更多的信息可以在here找到。

来源

2013-10-28 10:20:30 AfromanJ

为什么你

.col3:hover + div.text

不工作的原因是因为你使用的是相邻的选择。你基本上说的是“把任何带有课文的div节点放在与.col3相同的层次上，并在.col3徘徊时用它做些事情”。但是没有。 div.text与.col3不在同一层，而是它的直接子。

你想要做的是：

.col3:hover > div.text { 
    visibility:visible; 
}

它说“采取任何div.text这是.col3直接子节点，并用它做什么，当.col3悬停”。

来源

2013-10-28 10:22:16

+在CSS中被称为"adjacent sibling combinator"。同胞是与另一个元素包含在同一父元素中的元素。在这种情况下，您的.image-box元素是您的.text元素的同胞。这两个元素都是您的.col3元素的子元素。您的第一个选择器不会选择任何内容.text不是.col3的兄弟。

你需要使用一个descendant combinator：

.col3:hover div.text { 
    visibility: visible; 
}

还是一个child combinator：

.col3:hover > div.text { 
    visibility: visible; 
}

来源

2013-10-28 10:23:32

的CSS visibility属性DIV1徘徊另一个DIV（DIV2）

回答

相关问题