html - CSS 链接悬停不适用于图像

Question

我有一个场景，我想要带有边框底部的文本链接，并像这样设置 css

a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}

问题是包含在链接中的图像也有这个边框底部，例如。

<a href="home">
  <img src="logo.jpg" alt="Logo" class="logo-img">
</a>

如何定位仅用于文本链接的 a:hover？纯 CSS 会更可取。

Answer 1

两种方式，一种是将文本包裹在 span 中(以下示例)或设置一个唯一的类来链接仅包含文本的链接。

a {
  text-decoration: none;
}
a:hover {
  color: #492512;
}
a:hover :not(img) {
  border-bottom: 2px dashed #94705A;
}

<a href="home">
  <img src="http://placehold.it/50/100/" alt="Logo" class="logo-img" />
</a>

<br>
<br>

<a href="home">
  <span>Text</span>
</a>