CSS懸停在圖像問題上懸停在鏈接上？

Question

所以我想添加2個懸停圖片到我的網站，但是當我這樣做時，我得到了一個黑色的邊框通過圖像的中間切割，這是由於我懸停在鏈接效果。這裏是代碼

a:hover,a:active 
{ 
color:Black; 
outline:ridge; 
text-outline:#000; 
text-decoration:underline; 
font-size:20px; 
font-style:italic; 
font-style:bold; 

} 

我試過這個代碼從堆棧上的類似問題，但它的工作無濟於事。

a:hover img { 

a img:hover{border: none !important; 
} 

Answer 1

您嘗試的代碼格式不正確。嘗試這個。

a:hover img, a img:hover{ 
    border: none !important; 
} 

Answer 2

避免!important通常是一個好主意。在這種情況下，你可以給你的圖像和錨定一個類或ID並應用你想要的CSS規則。

HTML：

<a class="link" href="#">Some link</a> 
<img class="image" src=""> 

CSS：

.link:hover, .link:active { 
    color:Black; 
    outline:ridge; 
    text-outline:#000; 
    text-decoration:underline; 
    font-size:20px; 
    font-style:italic; 
    font-style:bold; 
} 

.image:hover { 
    border: none; 
} 

Answer 3

我會避免對所有一個標籤，例如激進風格的站點範圍...這將導致很多這樣的煩惱。嘗試用p標籤包裝文本以實現更嚴格的控制，或者給文本或圖像提供類似@mrkou的建議。

FIDDLE：http://jsfiddle.net/Xs4tn/

p a:hover, p a:active { 
    color:Black; 
    outline:ridge; 
    text-outline:#000; 
    text-decoration:underline; 
    font-size:20px; 
    font-style:italic; 
    font-style:bold; 
}