0

I am trying to make a banner where when the image is hovered the content of the page is hidden and comes back after they stop hovering. I have managed to display the banner below but I don't know how to hide the page content.

Can anyone help? Thanks

.page-content {
display: block;
}

.banner-content {
   display none;
}

    .banner-button:hover .banner-content { display: block;} 
    .banner-button:hover .page-content {display: none;}

    <html>
    <div class="banner-button">hover button</div>
    <div class="banner-content">banner</div>
    <div class="page-content">page content</div> /* hide this on hover*/
    </html>

2 Answers2

3

Use the general sibling selector along with the :hover pseudo-class:

.banner-button:hover ~ .page-content { display:none; }
    <div class="banner-button">hover button</div>
    <div class="banner-content">banner</div>
    <div class="page-content">page content</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

A second approached, but I think Scott Marcus approach is more compact.

.page-content {
  display: block;
}

.banner-content {
  display: none;
}

.container:nth-child(1):hover .banner-content {
  display: block;
}

.container:nth-child(1):hover .page-content {
  display: none;
}

<div class="container">
  <div class="banner-button">hover button</div>
        
  <div class="banner-content">banner</div>
        
  <div class="page-content">page content</div>
</div>

To complete the solution of Scott Marcus I think you need :

.banner-button:hover ~ .banner-content { display:block; }
.banner-button:hover ~ .page-content { display:none; }
Simon
  • 56
  • 6