CODEWITHSUNDEEP
htmlcss
c0lton
c0lton

Reputation: 61

CSS on hover display hidden div not working

HTML:

 <div class="top-container">
    <div class="primary-text">lorem</div>
    <div class="secondary-text">lorem</div>
</div>
<div class="secondary-container">
        <h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div class="info-container">
   <div class="container-one">
       <div class="box1">1</div>
       <h3>lorem</h3>
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
    </div>
   <div class="container-two">
    <div class="box2">2</div>
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
   </div>
   <div class="container-three">
    <div class="box">3</div>
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
</div>
<div class="info-sec">
    <img src="test.png" alt="blah">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Relavent CSS:

.info-sec{
visibility:hidden;

}
.box:hover + .info-sec{
    visibility:visible;
}

If I change the hover from the box to the info-container it works fine:

.info-container:hover + .info-sec{
visibility:visible;
}

But hovering using box does not work. I've also tried using display: none; and display: block;

Codepen: https://codepen.io/colton-22/pen/jOwoMxL

Upvotes: 1

Views: 542

Answers (1)

Developer
Developer

Reputation: 1672

The + is adjacent Sibling Selector. So when you use:

.info-container:hover + .info-sec{
visibility:visible;
}

It works because info-sec is the first next sibling of info-container. But when you use:

.box:hover + .info-sec{
    visibility:visible;
}

It doesn't work because info-sec is not the sibling of info-container.

According to my knowledge, there is no selector in css which works for you. So, you have to use javascript to achieve this.

Upvotes: 1

Related Questions