57

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
  • 43,322
  • 6
  • 62
  • 109
user2770029
  • 642
  • 1
  • 6
  • 8

3 Answers3

78

we just can show same label div on hovering like this

<style>
#b {
    display: none;
}

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

</style>
Ankit Agrawal
  • 5,814
  • 6
  • 22
  • 48
  • 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
30

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.

Sharath kumar
  • 1,039
  • 10
  • 16
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 - Standing with Ukraine
  • 24,408
  • 7
  • 69
  • 89
  • 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 - Standing with Ukraine 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 - Standing with Ukraine Nov 08 '20 at 17:54