Css visibility property div1 hovering another div(div2)

Question

I am hiding a div with the class .text with

 div.text{

 visibility:hidden;
      }

This div is surrounded by another div with the class .col3

<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

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......

any help is welcome...

score 3 · Answer 1 · edited May 23 '17 at 12:26

3

This should work:

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

The use of the + selector is incorrect as it targets elements directly following the first element. More information can be found here.

edited May 23 '17 at 12:26

Community

1
1

answered Oct 28 '13 at 10:20

AfromanJ

3,922
3
17
33

score 3 · Answer 2 · answered Oct 28 '13 at 10:23

+ in CSS is known as an "adjacent sibling combinator". 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. Both of these elements are children of your .col3 element. Your first selector will not select anything as .text isn't a sibling of .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;
}

score 2 · Answer 3 · answered Oct 28 '13 at 10:22

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". But there isn't any. The div.text is not on the same level as .col3, but a direct child of it.

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".

Css visibility property div1 hovering another div(div2)

3 Answers3