css - HTML/CSS : a:hover doesn't seem to change other div?

Question

我可能已经监督了一个非常愚蠢的错误，但我无法找出为什么这不起作用:

这是我的 HTML，它是一个简单的菜单，如果我将鼠标悬停在“Home”或“Play”上，div“deco”的字体颜色会变为红色...

<div class="menu">
<h1>
    <a href="#">HOME</a> <a href="#">PLAY</a> <a href="#">LOGIN</a>
     <div id="deco">A</div>
</h1>
</div>

CSS:

body { 
height:100%;
width:100%;
display: block;
background-color: #000;
overflow: hidden;
margin: 0;
padding:0;
}

.menu {

margin-top:10%;
margin-left: auto; 
margin-right: auto; 
text-align: center;
}

h1 { 
font-family: "Dauphin";
color: #FFFFFF;
} 

a {
color: #FFF;
text-decoration: none;  
}


a:hover #deco{
color: red;
}

#deco {
font-family: "Invader";
top: 123px;
color: #FFF;
width:100%;
height:100%;
text-align: center;
}

Answer 1

您的选择器与元素不匹配。要使 a:hover #deco 正常工作，div 必须像这样位于 anchor 内:

<a href="#">HOME
     <div id="deco">A</div>
</a> 

现代浏览器支持通用兄弟选择器~:

a:hover ~ #deco

如果您需要支持不支持通用同级选择器的浏览器，您可以使用 jQuery 实现，如下所示:

$('a').hover(
    function() { $('#deco').addClass('link-hover'); }, 
    function() { $('#deco').removeClass('link-hover'); });

并定义 CSS:

#deco.link-hover {
    color: red;
}