html - 答：悬停不工作

Question

HTML

 <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

CSS

@charset "utf-8";
/* CSS Document */

#logout {
color:#BBB;
}

a:hover {
color:#FFF;
}

虽然注销的颜色似乎是 css 中给出的颜色，但当我将鼠标放在链接上时颜色不会改变（变为白色）。是什么原因？

我必须告诉还有其他 css 文件，当鼠标放在它们上面时，它们往往会改变链接的颜色并且它们工作正常。

score 23 · Accepted Answer

id 选择器 ( #logout) 比类型选择器 ( a) 加上伪类 ( :hover) 更具体，因此您的第一个规则集将始终赢得级联。

改为使用#logout:hover。

score 2 · Accepted Answer

简化：

您有两个适用于此锚点的 CSS 规则。

两条规则都会改变颜色。

只能适用一条规则；只能选择一种颜色。

浏览器必须在基于 ID ( #logout) 的规则和基于元素类型 ( <a>) 的规则之间进行选择。

在这种情况下，基于 ID 的规则获胜。指定一个 ID 比指定一个类型（锚点）的所有元素更具体。

score 0 · Accepted Answer

您必须遵循层次结构顺序：

链接，悬停，访问

例如：

a:link
{
text-decoration:none;
color:#008b45;
}

a:hover
{
margin-bottom: 3px solid #ff7400;
    background:white;
}

a:visited
{
color:#ee9a00;
}

score 0 · Accepted Answer

给你！只是复制和意大利面

#logout{
color:#bbb;
}

#logout :hover{
color: #fff;
}

 <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

4 回答 4