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必须像这样生活在锚点内：

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

Answer 2

这不起作用，因为#deco不是a代码的子元素。

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

要使它工作，你需要#deco在A标签内，一个孩子而不是一个兄弟元素。或者你可以保留HTML原样，并用简单的jQuery代替（使用.css或.addClass来改变悬停时的样式定义）。

HTML / CSS：a：悬停似乎没有改变其他div？

2 个答案: