How to display element in one div when hovering over element in another div

Question

I have a 3-column section and the middle column contains two blocks of text - A and B. If the link in column 1 is hovered over, I want block A to appear. If the link in column 3 is hovered over, I want block B to appear.

Here is my code so far:

.google, .text, .yahoo { width:33% ; display:inline-block ; text-align:center}
.google, .yahoo { background:red }
.text { background:yellow }
.google-text, .yahoo-text { display:none }

.google a:hover .google-text { display:block }
.yahoo a:hover .yahoo-text { display:block }

<div class="container">
    <div class="google"><a href="https://google.com">Google</a></div>
    <div class="text">
        <div class="google-text">I love Google</div>    
        <div class="yahoo-text">I love Yahoo</div>  
    </div>
    <div class="yahoo"><a href="https://yahoo.com">Yahoo</a></div>
</div>

For the life of me I can't get it to work. What am I doing wrong? I'm trying to do this using pure CSS, no javascript if possible.

Any help would be most appreciated.

Thanks!

C

so far when i paste your code into a jsfiddle it only shows blue? no columns? — 54x1, Jan 14 '21 at 02:44
It's bizarre, I know. I think it's because the two divs inside the middle column are set to display:none — Cynthia, Jan 14 '21 at 02:57
@Cynthia did you meant to make some expandable navigation links with hover only like [this question](https://stackoverflow.com/a/44125302https://stackoverflow.com/a/44125302)? — Kyojimaru, Jan 14 '21 at 03:16

score 0 · Answer 1 · answered Jan 14 '21 at 03:30

i know a way you can do it all in css CSS Combinator Selectors my demo but it only shows one of the text on hover its just a start https://jsfiddle.net/0stceLa7/

.google a:hover+ .text .google-text, .google-sec {
        display: flex;
        z-index:2;
      }
     .yahoo a:hover+ .text .yahoo-text, .yahoo-sec {
        display: flex;
        z-index:1;
      }

it all has to be under one div then use an Adjacent or General sibling combinator/selector

google works but googlev2 is just covered under the google-text div if you know what i mean. — 54x1, Jan 14 '21 at 03:31

score 0 · Answer 2 · answered Jan 14 '21 at 04:26

A bit of rearrangement of the markup and CSS siblings selector can come in handy.

.google, .text, .yahoo { width:33% ; display:inline-block ; text-align:center}
.google,.yahoo { background:red }
.text { background:yellow }
.google-text, .yahoo-text { display:none }

.google:hover ~ .text > .google-text { display: block; }
.yahoo:hover ~ .text > .yahoo-text { display: block; }

<div class="container">
    <div class="google">
      <a href="https://google.com">Google</a>
    </div>
    
    <div class="yahoo">
      <a href="https://yahoo.com">Yahoo</a>
    </div>

    <div class="text">
        <div class="google-text">I love Google</div>    
        <div class="yahoo-text">I love Yahoo</div>  
    </div>
</div>

Using the CSS sibling selector ~ it only works if the target element comes after the hovered element, that's why I placed both "Yahoo" & "Google" links before the "text" div.

Refer this post.

score 0 · Answer 3 · answered Jan 14 '21 at 04:43

You need to alter the HTML a little, so the links are siblings of the container holding the blocks that appear. Also bring both links to the top. Basically, with CSS you can alter siblings that appear after a hovered element, or the children of a hovered elements, but never parents of the hovered element, siblings that appear before it, or the siblings of a hovered element's parent.

.google-text, .yahoo-text{
  display: none;
}

.google:hover ~ .text .google-text{
  display: block;
} 

.yahoo:hover ~ .text .yahoo-text{
  display: block;
}

<div class="container">
    <a class="google" href="https://google.com">Google</a>
    <a class="yahoo" href="https://yahoo.com">Yahoo</a>
    <div class="text">
        <div class="google-text">I love Google</div>    
        <div class="yahoo-text">I love Yahoo</div>  
    </div>
</div>

Temani Afif · Answer 4 · 2021-01-14T08:19:24.863

Do it like below without changing the HTML structure:

.container {
  display:flex;
  pointer-events:none; /* prevent the hover effect from all the element */
}

.google, .text, .yahoo {
  width: 33%;
  text-align: center
}

.google, .yahoo {
  background: red
}

.text {
  background: yellow
}

.google-text, .yahoo-text {
  display: none
}

.google a, .yahoo a{
  pointer-events:initial; /* put back hover only on link elements*/
}

/* when hovering google link show "I love google" */
.google:hover ~ .text .google-text{
  display: block
}
/* when hovering google link DON'T show "I love Yahoo" */ 
.google:hover ~ .text .yahoo-text  {
   display:none; 
}
/* when hovering the container show "I love Yahoo". 
With the previous selector this will only work when hovering yahoo link*/
.container:hover .yahoo-text {
  display: block
}

<div class="container">
  <div class="google"><a href="https://google.com">Google</a></div>
  <div class="text">
    <div class="google-text">I love Google</div>
    <div class="yahoo-text">I love Yahoo</div>
  </div>
  <div class="yahoo"><a href="https://yahoo.com">Yahoo</a></div>
</div>

How to display element in one div when hovering over element in another div

4 Answers4