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

2  

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

some text here...

  
Status online
  
Status offline

1  

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

0  

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.

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

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

 some text here...
    

        
Status online
        
Status offline