html - 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

避免!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 2

我会避免在站点范围内的所有标签上使用如此激进的样式……这会引起很多这样的头痛。尝试将您的文本包装在 p 标签中以进行更严格的控制，或者像 @mrkou 建议的那样为文本或图像提供一个类。

小提琴：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;
}

Answer 3

您尝试的代码似乎格式不正确。尝试这个。

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