在图像悬停时更改div的属性

#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时,myUserMenu背景应该变为红色

#myAvatar:hover #myUserMenu

And nothing happens ! Any idea why ?

没有任何反应!知道为什么吗?

4 个解决方案

#1

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

将文本括在span中并使用+运算符来影响下一个元素的样式。

#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>

#2

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

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

此选择器正在#myAvatar中查找#myUserMenu。显然这不起作用,因为它在#myUserMenu之外。

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

您可以做的是在#myAvatar之后立即查找#myUserMenu,如下所示:

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

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

这是Adjacent Sibling Combinator。有关详细信息,请参阅此文章。

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

或者您可以重新排列HTML以将#myUserMenu放在#myAvatar中。

#3

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

您的div #myUserMenu不是您图像的子项,因此您需要使用兄弟选择器来定位div:

#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.

通用兄弟组合选择器〜允许您选择可以出现在其后任何位置的元素。

#4

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

#1