CSS On hover show another element

Question

I want to use CSS to show div id='b' when I hover over div id='a' , but I cannot figure out how to do it because the div 'a' is inside another div that div 'b' is not in.

<div id='content'>
     <div id='a'>
         Hover me
     </div>
</div>
<div id='b'>
    Show me
</div>

Answer 1

we just can show same label div on hovering like this

<style>
#b {
    display: none;
}

#content:hover~#b{
    display: block;
}

</style>

Answer 2

It is indeed possible with the following code

 <div href="#" id='a'>
     Hover me
 </div>

<div id='b'>
    Show me
</div>

and css

#a {
  display: block;
}

#a:hover + #b {
  display:block;
}

#b {
  display:none;
  }

Now by hovering on element #a shows element #b.

Answer 3

You can use axe selectors for this.

There are two approaches:

1. Immediate Parent axe Selector ( < )

#a:hover < #content + #b

This axe style rule will select #b , which is the immediate sibling of #content , which is the immediate parent of #a which has a :hover state.

 div { display: inline-block; margin: 30px; font-weight: bold; } #content { width: 160px; height: 160px; background-color: rgb(255, 0, 0); } #a, #b { width: 100px; height: 100px; line-height: 100px; text-align: center; } #a { color: rgb(255, 0, 0); background-color: rgb(255, 255, 0); cursor: pointer; } #b { display: none; color: rgb(255, 255, 255); background-color: rgb(0, 0, 255); } #a:hover < #content + #b { display: inline-block; } 

 <div id="content"> <div id="a">Hover me</div> </div> <div id="b">Show me</div> <script src="https://rouninmedia.github.io/axe/axe.js"></script> 

---

2. Remote Element axe Selector ( \\ )

#a:hover \ #b

This axe style rule will select #b , which is present in the same document as #a which has a :hover state.

 div { display: inline-block; margin: 30px; font-weight: bold; } #content { width: 160px; height: 160px; background-color: rgb(255, 0, 0); } #a, #b { width: 100px; height: 100px; line-height: 100px; text-align: center; } #a { color: rgb(255, 0, 0); background-color: rgb(255, 255, 0); cursor: pointer; } #b { display: none; color: rgb(255, 255, 255); background-color: rgb(0, 0, 255); } #a:hover \\ #b { display: inline-block; } 

 <div id="content"> <div id="a">Hover me</div> </div> <div id="b">Show me</div> <script src="https://rouninmedia.github.io/axe/axe.js"></script> 

Answer 4

Using the adjacent sibling combinator , + , which matches the immediate next sibling.
Then classes might be used for multiple independent hovers:

<div class='a'>
  Hover me 1
</div>
<div class='b'>
  Show me 1
</div>


<div class='a'>
  Hover me 2
</div>
<div class='b'>
  Show me 2
</div>

.b {
  display: none;
}

.a:hover + .b {
  display: block;
}