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

Answer 1

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.

Answer 2

+ 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;
}