0

我可能已经监督了一个非常愚蠢的错误，但我不知道为什么这不起作用：

这是我的 HTML，它是一个简单的菜单，如果我将鼠标悬停在“主页”或“播放”上，则 div“装饰”的字体颜色会变为红色......

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

2 回答 2

4

您的选择器与元素不匹配。为了a:hover #deco工作，div 必须像这样住在锚内：

<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;
}
于 2012-12-19T20:02:51.683 回答
1

这不起作用，因为#deco它不是a标签的子元素。

CSS 声明a:hover #deco指的是任何 ID 为“deco”的元素，它是处于悬停状态的锚元素的子元素（例如包含在其中）。

要使其工作，您需要 #deco 位于 A 标记内，是子元素而不是兄弟元素。或者您可以保留 HTML 原样并使用简单的 jQuery 来完成此操作（使用 .css 或 .addClass 更改悬停时的样式定义）。

于 2012-12-19T20:03:07.237 回答