2015-04-29 120 views
2

如果我有一个<div>,我可以控制它的颜色是这样的:禁用HTML链接悬停颜色

<div class="good">Hello</div> 
.good { color: green; } 

我想要做的链接同样的事情,就像这样:

<a href="...", class="good">Hello</a> 
.good { color: green; } 

我即使发生鼠标悬停时,也希望链接为绿色,如<div>。我知道我能做到这一点:

.good:hover { color: green; } 

但这意味着我要记得补充的是,可以应用到<a>元素的每一个类。有没有简单的方法来禁用悬停颜色变化为<a>?我想是这样的:

a:hover { color: do-not-change; } 

或:

a:hover { color: inherit-from-non-hover; } 

更新 我忘了提,我没有设置全局aa:hover重写浏览器的默认:

a, a:hover { color: black; text-decoration: none; } 

这是因为我不知道如何禁用悬停颜色。理想的情况是什么,我想要的是:

a { color: black; } 
a:hover { color: <some way to tell it to not change>; } 
.good { color: green; } 

然后<a>是黑色的,悬停或没有。并且<a class="good">是绿色的,悬停与否。

+0

即使在徘徊时仍然保持绿色。 http://jsfiddle.net/j08691/eew6rqzw/ – j08691

+0

如果您没有设置全局悬停状态(a:hover),那么您不需要定义.good:悬停,它将与.good 。 – kel

回答

1

您可以使用inheritinitial属性,但这会导致悬停时显示为黑色或者将永久颜色属性应用于锚标记的直接父元素。

a:hover{ 
    color: inherit; /* Inherits color property from its parent */ 
} 

a:hover{ 
    color: initial; /* Takes initial value of the property which is black in this case */ 
} 
+0

这不是我想要的。我想要使​​用相同元素的非悬停颜色的相同颜色,而不是父级的颜色。 – cnshenj

0

几种方法可以做到这...

创建一个新的类,它可以在任何元素上使用,其中:悬停可能是一个不同的颜色:

<div class="good nochange">Hello</div> 
<a href="..." class="good nochange">Hello</a> 
.nochange:hover{ 
    color:inherit; 
} 

将它添加到您的类good

<a href="..." class="good">Hello</a> 
.good:hover{ 
    color:inherit; 
} 

或者,它适用于所有链接:

<a href="...">Hello</a> 
a:hover{ 
    color:inherit; 
}