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

【问题标题】：Change property of element when hovering over another element将鼠标悬停在另一个元素上时更改元素的属性
【发布时间】：2014-02-19 12:19:34
【问题描述】：

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

我拥有的是一个带有 .class 的 .sub-menu 的子菜单

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

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”，但当我将鼠标悬停在子导航上时，它会消失。我需要它留在那里以保持悬停状态。

谢谢。

【问题讨论】：

标签： html css hover

【解决方案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
}

【讨论】：

嗨，有道理。仅使用 CSS 就没有其他方法了吗？
我也添加了CSS代码，希望对你有帮助。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您正在影响父子概念。试试这个

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

【讨论】：

您好，谢谢，但在这种情况下我们正在更改两个元素的背景颜色，因此无法正常工作。当我将鼠标悬停在 .sub-menu a 上时，我只希望 #menu-item-2 背景发生变化。并且只有 #menu-item-2 必须更改，不能同时更改。还是谢谢。

【解决方案4】：

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

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

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

添加

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

【讨论】：

您好，谢谢，但在这种情况下我们正在更改两个元素的背景颜色，因此无法正常工作。当我将鼠标悬停在 .sub-menu a 上时，我只希望 #menu-item-2 背景发生变化。并且只有 #menu-item-2 必须更改，不能同时更改。还是谢谢。

【解决方案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.

【讨论】：