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; 
}