65

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>
Deduplicator
  • 44,692
  • 7
  • 66
  • 118
user2770029
  • 722
  • 1
  • 7
  • 8
  • 3
    no can do unless you 1) change your markup to have a nested/parent/ancestor relationship, 2) use javscript/jquery – Jawad Sep 11 '13 at 19:09
  • 2
    Only way you could do this with CSS is if they were nested. – crush Sep 11 '13 at 19:09
  • Thanks, just needed to confirm it. – user2770029 Sep 11 '13 at 19:10
  • @Jawad Borrowed that from another user's profile. Felt it was appropriate and necessary in today's world. =} – crush Sep 11 '13 at 19:23
  • As we can know from the answers form [this question](https://stackoverflow.com/q/1014861/3552975), parent selector is not supported by all browsers(Firefox). I think a workaround is using JS. – Lerner Zhang Dec 17 '22 at 08:58
  • 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: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover – adnauseam Aug 17 '23 at 16:09

5 Answers5

84

we just can show same label div on hovering like this

<style>
#b {
    display: none;
}

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

</style>
Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49
  • 23
    TIL [This works](http://www.w3.org/TR/selectors/#general-sibling-combinators) - [If (and only if) `#b` is after `#content`](http://jsfiddle.net/daCrosby/wrkxg/) – DACrosby Sep 11 '13 at 19:52
  • 2
    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](http://jsfiddle.net/bonatoc/2Lmgf7jr/1/). – Christian Bonato Nov 30 '14 at 03:35
  • @DACrosby in your fiddle, when `#b2` will display? – Shafizadeh Aug 08 '15 at 20:06
  • 1
    @Sajad with the noted HTML and only using CSS, it will never because [the sibling selectors cannot go backward hrough HTML, only forward](http://stackoverflow.com/a/1817801/1265817). 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. – DACrosby Aug 09 '15 at 17:54
31

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.

blackcityhenry
  • 691
  • 1
  • 6
  • 22
Sharath kumar
  • 1,118
  • 13
  • 17
17

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>
Community
  • 1
  • 1
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 3
    https://github.com/RouninMedia/axe is that what this is? This isn't officially supported, but it's your project – TankorSmash Jan 28 '18 at 03:59
  • 1
    Yes, it's a work in progress. A proof of concept, if you like. – Rounin Feb 04 '18 at 21:43
  • 1
    This is the right answer because it shows the element only when `#b` is hovered, and not `#content` alone. – Sileo Aug 19 '20 at 15:33
  • 1
    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. – Olamigoke Philip Nov 08 '20 at 11:09
  • 1
    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. – Rounin Nov 08 '20 at 17:54
0

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;
}
Grastveit
  • 15,770
  • 3
  • 27
  • 36
0

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;
}
blackcityhenry
  • 691
  • 1
  • 6
  • 22
Stefan Drazic
  • 50
  • 6