change property of div on hover of an image

Question

#myUserMenu {
  position: absolute;
  background-color: white;
  top: 20px;
  width: 116px;
  border: 1px solid #CCC;
}
#myAvatar:hover #myUserMenu {
  background-color: red;
}
.menuItem {
  cursor: pointer;
  border-bottom: 1px solid #EEE;
}

<img id='myAvatar'>some text here...
<div id="myUserMenu">
  <div class='menuItem'>Status online</div>
  <div class='menuItem'>Status offline</div>
</div>

So when I hover the myAvatar, myUserMenu background should change to red

#myAvatar:hover #myUserMenu

And nothing happens ! Any idea why ?

Nothing happens because you are saying on hover on avatar to find inside another element (UserMenu) and there is no such element. — Bojan Petkovski, Jun 29 '15 at 13:55
If the element is outside of the hover element, it won't work. I suggest using JavaScript. — MrEhawk82, Jun 29 '15 at 13:58
possible duplicate of [CSS next element](http://stackoverflow.com/questions/3660046/css-next-element) — Banana, Jun 29 '15 at 13:59

m4n0 · Accepted Answer · 2015-06-29T16:00:51.987

Enclose the text inside a span and use + operator to affect the next element's style.

#myUserMenu {
  position: absolute;
  background-color: white;
  top: 20px;
  width: 116px;
  border: 1px solid #CCC;
}
#myAvatar:hover + #myUserMenu {
  background-color: red;
}
.menuItem {
  cursor: pointer;
  border-bottom: 1px solid #EEE;
}

<span id="myAvatar">some text here...</span>
<div id="myUserMenu">
  <div class='menuItem'>Status online</div>
  <div class='menuItem'>Status offline</div>
</div>

score 1 · Answer 2 · answered Jun 29 '15 at 13:58

#myAvatar:hover #myUserMenu {
    background-color: red;
}

This selector is looking for #myUserMenu inside #myAvatar. Obviously that won't work because it's outside #myUserMenu.

What you could do is look for #myUserMenu immediately after #myAvatar, like so:

#myAvatar:hover + #myUserMenu {
    background-color: red;
}

This is the Adjacent Sibling Combinator. See this article for more details.

Or you could rearrange your HTML to put #myUserMenu inside #myAvatar.

score 0 · Answer 3 · answered Jun 29 '15 at 13:58

Your div #myUserMenu is not a child of your image, so you need to target the div with a brother selector :

#myAvatar:hover ~ #myUserMenu {
    background-color:red;
}

JsFiddle: http://jsfiddle.net/ghorg12110/o0c2hppv/

The general sibling combinator selector ~ allow you to select the element which can appear anywhere after it.

Suresh Karia · Answer 4 · 2015-07-01T10:14:54.430

-1

You have to apply parent child relationship in order to apply hover.

Like this

#myUserMenu {
  position: absolute;
  background-color: white;
  top: 20px;
  width: 116px;
  border: 1px solid #CCC;  
}
#myAvatar:hover #myUserMenu {
    background-color:red;
}

.menuItem {
    cursor:pointer;
    border-bottom:1px solid #EEE;
}

<div id="myAvatar">
<img id=''> some text here...
    <div id="myUserMenu">
        <div class='menuItem'>Status online</div>
        <div class='menuItem'>Status offline</div> 
    </div>
</div>

edited Jul 01 '15 at 10:14

answered Jun 29 '15 at 13:56

Suresh Karia

17,550
18
67
85

1

"You can only change Child's property on hover of parent." Not true. – j08691 Jun 29 '15 at 14:02

change property of div on hover of an image

4 Answers4