html - 选择里面没有img的a-element

Question

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

a:hover {
   background: #EFEFEF;
}

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

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

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

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

score 3 · Accepted Answer

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

a img {
  display: block;
}

请记住，将内联图像转换为块元素会影响我们的布局。

score 1 · Accepted Answer

作为对乔纳森回答的增强，如果您不希望元素的布局发生变化，我建议您将aa变成 ainline-block并制作imga block。

a {display:inline-block}
a img {display:block}

这样，a将保持内联，并且文本将保持其完整性。请参阅jsFiddle。

score 0 · Accepted Answer

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

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

所以基本上，这将选择所有在其 href 属性中带有“foo”的 a 元素。等号前的星号充当通配符。否则，它只会选择恰好具有“foo”href 的元素。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

5 回答 5