Question

我正在尝试在悬停在另一个元素上时更改一个元素的属性。在这种情况下，它在我的导航中。

我所拥有的是带有.cub菜单

的.class的子菜单

当我将鼠标悬停在子菜单上时，我希望该元素的父级更改背景颜色

HTML代码

<ul class="main-nav">
  <li id"menu-item-1"><a>HOME</a></li>
  <li id"menu-item-2"><a>About</a>
     <ul class="sub-menu">
       <li><a>Some Link</a></li>
     </ul></li>
  <li id"menu-item-3"><a>Services</a></li>
 </ul>

所以我要做的是当我将鼠标悬停在子菜单上时，我希望“关于链接”具有背景颜色。

我一直在尝试的CSS代码：

.sub-menu a:hover + #menu-item-2 a{
   background-color:#FF0;
 }

还试过这两个：

.sub-menu a:hover ~ #menu-item-2 a{
   background-color:#FF0;
 }

.sub-menu a:hover > #menu-item-2 a{
   background-color:#FF0;
 }

有人可以在这里指出我正确的方向。

你可以看到我在这里遇到的问题 - http://switchmedialab.co.za/switch-media/

当我将鼠标悬停在服务上时，会出现背景图像“splat”，但当我将鼠标悬停在子导航上时，它会消失。我需要它留在那里悬停状态。

感谢。

Answer 1

在这种情况下使用javascript，它会很好，

<ul class="main-nav" id="mainDiv">
  <li id"menu-item-1"><a>HOME</a></li>
  <li id"menu-item-2"><a>About</a>
     <ul class="sub-menu" onmouseover="colourChange()";>
       <li><a>Some Link</a></li>
     </ul></li>
  <li id"menu-item-3"><a>Services</a></li>
 </ul>

的javascript，

<script>
function colourChange() {
  document.getElementById("mainDiv").style.backgroundColor="#FF0";
}
</script>

你也可以用CSS做同样的事情。像这样，

.sub-menu:hover + .main-nav {
    background: ##FF0
}

Answer 2

在CSS中，您不能根据孩子的状态影响父母

Answer 3

这是一个小提琴示例http://jsfiddle.net/AdKP9/

#menu-item-2:hover {
    background: red;
}

编辑：http://jsfiddle.net/AdKP9/1/

只需添加

.sub-menu:hover {
   background: white; 
}

Answer 4

你影响了亲子概念。试试这个

#menu-item-2 a:hover {
    background: red;
}

Answer 5

<!DOCTYPE html>
<html>
<head>
<style>
:target
{

background-color: #e5eecc;
}
</style>
</head>
<body>
<ul class="main-nav" id="mainDiv">
  <li id"menu-item-1"><a>HOME</a></li>
  <li id="news1"><a href="#news2">About</a>
     <ul class="sub-menu" onmouseover="colourChange()";>
       <li><a href="#news1">Some Link</a></li>
     </ul></li>
  <li id"menu-item-3"><a>Services</a></li>
 </ul>

</body>
</html>
I tried to use CSS3 since you wanted it to be CSS else Javascript is the best in this case.

将鼠标悬停在另一个元素上时更改元素的属性

5 个答案: