CSS链接悬停不适用于图像

Question

我有一种情况，我想让文本链接带有border-bottom-bottom，并像这样设置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

没问题。

向您的文本链接添加一个类。然后像这样定位这些链接。

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

<a href="home">
  <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=bc7c2f3904bf" alt="Logo" class="logo-img">
</a>

<a class="testing" href="home">
  TESTING
</a>

希望这可以帮助。

添加编辑

这是另一个选择

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

a[href*='ignorethis']  {
	text-decoration: none !important;
	border-bottom: 0 none !important;
}

<a href="http://www.milk.com?ignorethis">
  <img src="http://s.w.org/style/images/wp-header-logo.png" alt="Logo" class="logo-img">
</a>


<a href="http://www.milk.com">
  TESTED
</a>

通过将 href 属性包含给定值（“忽略此”）的所有锚定为目标，可以实现相同的效果。可以使用其他方式。

属性 *= 包含值

属性 ^= 以值开头

属性 $= 以值结尾

要使用此功能，只需将“#special-test-value”附加到链接末尾，或者在目标链接的情况下附加“?special-test-value=0”，或者在查询字符串已存在的情况下使用“ &特殊测试值=0'

我认为这是一种有趣的定位链接的方式，并且对很多人来说可能是新鲜的。

另一个用例

如果情况是单个网址或一组特定的网址，您可以使用它们来结束定位它们并以这种方式排除锚定图像。

a[href$='somedomain.com/url1/'],  a[href$='somedomain.com/url2/'], a[href$='somedomain.com/url.../'], a[href$='somedomain.com/urlN/']  {
    text-decoration: none !important;
    border-bottom: 0 none !important;
}

好的，祝您度过一个美好的夜晚。