CSS:将鼠标悬停在块上以更改文本颜色和链接 [英] CSS: hover over block to change text color and link

问题描述

我有一个块(div)，其中包含带有链接的文本.当我将鼠标悬停在此块上时，我需要更改文本颜色(也更改链接颜色)." div:hover "-更改此文本颜色，但链接颜色保持不变.

I have a block (div) and which contain text with links. When I hover over this block I need to change text color (also links color). "div:hover" - with this text color is changed, but link color remain unchanged.

完整代码:

CSS:

a {
    color: #336699;
}
div {
    height: 50px;
    background-color: #FFF;
    color: red;
}
div a {
    color: red;
}
div:hover {
    background-color: #336699;
    color: #FFF;
}

HTML:

<div>
    text test <a href="#">URL</a> text
</div>

推荐答案

您需要明确定位链接以覆盖其颜色.

You need to target the link explicitly to override its color.

赞:

div:hover a {
    color: #FFF;
}

FIDDLE

FIDDLE

说明:

您最初使用以下方法将链接的颜色设置为红色:

You originally set the the color of the link to red with:

div a {
    color: red;
}

当您添加 div:hover {} 类时-尽管它是比 div a 更具体的规则-它并不针对链接本身-仅针对链接链接的容器.

When you then add the div:hover{} class - although it is a more specific rule than div a - it does not target the link itself - only the container of the link.

因此，如果没有设置链接颜色的规则-那么 div:hover {} 类将通过继承插入并在链接上将链接颜色变为白色

So if there was no rule which set the link color - then the div:hover{} class would kick in and color the link white on hover - via inheritance.

但是，由于存在 是 的规则，该规则会将您的链接涂成红色-您需要通过选择器 div:hover a来将链接本身定位为悬停目标

这篇关于CSS:将鼠标悬停在块上以更改文本颜色和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！