2015-04-29 124 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; 
}