选择不带img的a元素

Question

在html5网页上，我有一个悬停效果。像这样：

a:hover {
   background: #EFEFEF;
}

我还有一个带链接的图像列表：

<a href="x">
    <img src="images/y.png" />
</a>

将鼠标悬停在这些链接上时，图像下方会出现＃EFEFEF彩色线条。我该如何删除？

这不是文本修饰：下划线，也填充填充不起作用。

Answer 1

您可能会在图像下方看到锚点的背景。将图像的显示设置为阻止：

a img {
  display: block;
}

演示之前和之后：http://jsbin.com/enikoz/edit#preview

请注意，将内嵌图像转换为块元素会影响我们的布局。

Answer 2

作为Jonathan答案的增强，如果您不希望更改元素的布局，我建议将a转换为inline-block以及{{1} } {a img。

block

这样，a {display:inline-block} a img {display:block} 将保持内联，文本将保持其完整性。请参阅jsFiddle。

Answer 3

您正在图像下方的空白处看到背景颜色;如果删除图像后面的空格，它应该消失：

<a href="x">
    <img src="images/y.png" /></a>

Answer 4

如果您的图片链接指向公共目录或网站，您实际上可以通过使用带有正则表达式技巧的属性选择器来选择它们。

a[href*="foo"]:hover {
   background:transparent;
} 

所以基本上，这将在他们的href属性中选择所有带有“foo”的元素。等号前面的星号作为通配符。否则，它只会选择具有“foo”href的元素。

Answer 5

我的猜测是，您看到的线是图像下方的下降空间（位于文本基线上），后面是背景颜色。尝试text-align: bottom应用于图像本身，看看线条是否消失或移动到图像的顶部。如果没有，请尝试text-bottom。

如果其中任何一个有效，那么垂直对齐就是问题所在，您可以通过向图像添加页面颜色的背景并给它一些底部填充（例如，0.15em）同时对齐它来修复它在文本行的底部（使用bottom或text-bottom）。