Question

我在div中有一个链接，

我希望当 div 悬停时链接颜色变为红色（不仅仅是链接本身悬停时），但我无法使其正常工作。这是例外：

<div class="witha"><a href="">Test color without tag A</a></div>
<div class="withouta">Test color with tag A</div>

这是css：

<style type="text/css">
.witha,.withouta {
    height: 40px;
    border: solid 1px red;
    padding: 5px;
}

.witha:hover,.withouta:hover {
    color: red;
}

a:link {
    color:black;
}

a:visited {

}

a:hover {
    color:red;
}

a:active {

}
</style>

在测试页面时，我发现在拥有标签a的div中，除非链接悬停，否则悬停不会发生，标签'a'的属性似乎会覆盖div的设置。

如何使其工作？（我只想在div悬停后更改链接颜色）

------------更新--------------------------------- < / p>

嗨，！important不起作用。而且我担心会有人误解我。

以下是一个示例，请检查并测试。

<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.witha,.withouta {
    height: 40px;
    border: solid 1px black;
    padding: 5px;
}
.witha:hover,.withouta:hover {
    color: red ! important;
}
a:link {
    color: black;
}
a:visited {

}
a:hover {
    color: red
}
a:active {

}
</style>
</head>
<body>
<div class="witha"><a href="">Test color without tag A</a><br/>This is not a link, it works fine(change to red when the div.witha is hovered).But the link above should change to red also.</div>
<div class="withouta">Test color with tag A</div>
</body>
</html>

Answer 1

使悬停颜色成为重要属性

.witha:hover,.withouta:hover {
    color: red !important;
}

Answer 2

您需要查看CSS选择器的specificity。

要么增加:hover，要么使用!important。

Answer 3

您没有告诉我们您正在测试哪种浏览器 IE6只允许在<a>标签上“悬停”psuedo标记。

Answer 4

如果我理解你的问题，我认为你需要的是这条规则。

a:hover, .witha:hover a{
    color: red
}

这个（具有：悬停a）比以下规则更具体，该规则以前管理链接的文本颜色，即使应用了withh：hover规则

    a:link {
    color: black;
}

顺便说一下，在CSS规则中使用！important应该限制在没有其他选择时。如果可能，请使用更具体的选择器。

请务必阅读@ Alex答案中链接的特殊性信息。

Answer 5

诀窍是在悬停的a中选择.witha 像这样 JSFiddle

.witha:hover a {
    color: red;
}

或完整：

<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.witha,.withouta {
    height: 40px;
    border: solid 1px black;
    padding: 5px;
}
.witha:hover,.withouta:hover {
    color: red ! important;
}
a:link {
    color: black;
}
a:visited {

}

.witha:hover a {
    color: red;
}
a:active {

}
</style>
</head>
<body>
<div class="witha"><a href="">Test color without tag A</a><br/>This is not a link, it works fine(change to red when the div.witha is hovered).But the link above should change to red also.</div>
<div class="withouta">Test color with tag A</div>
</body>
</html>

标签的属性是否覆盖其父（div）？

5 个答案: