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>

因此，当我将myAvatar悬停时，myUserMenu背景应更改为红色

#myAvatar:hover #myUserMenu

没有任何反应！知道为什么吗？

Answer 1

将文本包含在范围内并使用+运算符来影响下一个元素的样式。

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

Answer 2

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

此选择器正在 #myUserMenu中寻找#myAvatar 。显然，因为它在#myUserMenu之外而无法工作。

您可以做的是在#myUserMenu后立即查找#myAvatar，如下所示：

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

这是Adjacent Sibling Combinator。请参阅this article for more details。

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

Answer 3

你的div #myUserMenu不是你形象的孩子，所以你需要用兄弟选择器来定位div：

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

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

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

Answer 4

您必须应用父子关系才能应用悬停。

喜欢这个

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

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

4 个答案: