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

CSS悬停在链接上的鼠标悬停在图像问题上？

3 个答案: