[英]Css visibility property div1 hovering another div(div2)
I am hiding a div with the class .text with 我正在用类.text隐藏一个div
div.text{
visibility:hidden;
}
This div is surrounded by another div with the class .col3 这个div被另一个带有.col3类的div所包围
<div class="col3">
<div class="image-box">
<div class="text"> test </div>
</div>
</div>
I want the visibility to change to "visible" when i hover col3 当我悬停col3时,我希望可见性更改为“可见”
i tried 我试过了
.col3:hover + div.text {
visibility:visible;
}
however it doesnt seem to work this way. 但它似乎没有这种方式。 strange thing is , when i do
奇怪的是,当我这样做
.image-box:hover + div.text{
visibility:visible;
}
It does show the text div when i hover the image box, but thats not what i want, i want it to show when i hover the surrounding div...... 当我悬停图像框时它确实显示文本div,但那不是我想要的,我希望它显示当我悬停周围的div ......
any help is welcome... 欢迎任何帮助......
+
in CSS is known as an "adjacent sibling combinator" . CSS中的
+
被称为“相邻兄弟组合子” 。 A sibling is an element which is contained within the same parent as another element. 兄弟姐妹是与另一个元素包含在同一父母中的元素。 In this case, your
.image-box
element is a sibling of your .text
element. 在这种情况下,
.image-box
元素是.text
元素的兄弟。 Both of these elements are children of your .col3
element. 这两种元素是你的孩子
.col3
元素。 Your first selector will not select anything as .text
isn't a sibling of .col3
. 你的第一个选择器不会选择任何东西,因为
.text
不是.col3
的兄弟。
You'll need to use either a descendant combinator : 您需要使用后代组合器 :
.col3:hover div.text {
visibility: visible;
}
Or a child combinator : 或者儿童组合子 :
.col3:hover > div.text {
visibility: visible;
}
The reason why your 你的原因
.col3:hover + div.text
Isn't working is because you're using an adjacent selector. 不工作是因为你正在使用相邻的选择器。 What you're basically saying is "Take any div-node with the class text, that is lying on the same level as .col3, and do something with it when .col3 is hovered".
您基本上所说的是“使用类文本获取任何div节点,与.col3位于同一级别,并在.col3悬停时对其执行某些操作”。 But there isn't any.
但没有。 The div.text is not on the same level as .col3, but a direct child of it.
div.text与.col3不在同一级别,而是它的直接子级。
What you want to do is: 你想要做的是:
.col3:hover > div.text {
visibility:visible;
}
Which says "Take any div.text which is a direct child node of .col3, and do something with it, when .col3 is hovered". 其中说“把任何div.text作为.col3的直接子节点,并用它来做什么,当.col3徘徊”时。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.