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>

Kenweigh

no can do unless you 1) change your markup to have a nested/parent/ancestor relationship, 2) use javscript/jquery – Anglican

Only way you could do this with CSS is if they were nested. – Trantham

Thanks, just needed to confirm it. – Kenweigh

@Anglican Borrowed that from another user's profile. Felt it was appropriate and necessary in today's world. =} – Trantham

As we can know from the answers form this question, parent selector is not supported by all browsers(Firefox). I think a workaround is using JS. – Zeb

Nota bene: if you're interested in making a feature hover-dependent, don't forget that some devices lack hover support (like some phones and tablets). If you're using CSS, you can check for hover support via the hover CSS media query. This will determine if the user's primary input mechanism can hover over elements. See: developer.mozilla.org/en-US/docs/Web/CSS/@media/hover – Transformer

Answer 1

we just can show same label div on hovering like this

<style>
#b {
    display: none;
}

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

</style>

Rossierossing

TIL This works - If (and only if) #b is after #content – Francescafrancesco

Precision : it also works if #b is not DIRECTLY after #content. This allows swapping. I'm baffled at how CSS can sometimes eliminate the need of JQuery/Javascript for basic interactions. – Capitulation

@Francescafrancesco in your fiddle, when #b2 will display? – Dillydally

@Sajad with the noted HTML and only using CSS, it will never because the sibling selectors cannot go backward hrough HTML, only forward. You'd need to put the #content before #b2, or use JavaScript, of use the :hover of an element earlier or higher up the DOM. – Francescafrancesco

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.

Litt

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>

Rutharuthann

github.com/RouninMedia/axe is that what this is? This isn't officially supported, but it's your project – Gabbard

Yes, it's a work in progress. A proof of concept, if you like. – Rutharuthann

This is the right answer because it shows the element only when #b is hovered, and not #content alone. – Present

Great work you've got @Rounin. Your library greatly helped. I will study it more. I will also love to be a part of the continued success. If there's any way i can help; kindly let me know. – Upandcoming

You're very kind, @Olamigoke Philip. It's currently about 33% finished (and, honestly, I've not really worked on it since Jan-Feb 2017). If all goes well, I plan to move axe forward in 2021. Not least I want to significantly advance the axeBlades extension. – Rutharuthann

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;
}

Saintpierre

Answer 5

If anybody is using position:absolute, you can run into issues with the approaches above. Make sure you handle hover of the absolute element as well.

<div class='content'>
  Hover me 1
</div>
<div class='hover'>
  Show me 1
</div>

.hover {
  position: absolute;
  visibility: hidden;
}
.content:hover + .hover {
  visibility: visible !important;
}
.hover:hover {
  visibility: visible !important;
}

Zwolle