Css visibility property div1 hangs another div (div2)

Question

I am hiding a div with class .text with

 div.text{

 visibility:hidden;
      }

This div is surrounded by another div with 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 pointed col3

I tried

.col3:hover + div.text {

visibility:visible;
}

however, it does not seem to work that way. strange when i do

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

It shows a text div when I find the image, but that is not what I want, I want it to show when I find the surrounding div ......

any help is appreciated ...

Answer 1

This should work:

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

+ , , . .

Answer 2

+ CSS " -" . - , , . .image-box .text. .col3. , .text .col3.

:

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

:

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

Answer 3

,

.col3:hover + div.text

It does not work because you are using a nearby selector. Basically you say: "Take any div-w630 with class text lying at the same level as .col3, and do something with it when .col3 hangs." But no. Div.text is not at the same level as .col3, but is a direct descendant.

What do you want to do:

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

That says: "Take any div.text that is a direct child node of .col3 and do something with it when .col3 hangs."