Question

我有一个场景，我希望将文本链接设置为border-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>

希望这有帮助。

添加了EDIT

这是另一个选项

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属性包含给定值（'忽略此'），可以实现相同的目标。其他方法可以使用。

attribute * =包含值

属性^ =以值

开头

属性$ =以值

结束

要使用此功能，只需将“＃special-test-value”附加到链接末尾，或者在目标链接的情况下附加“？special-test-value = 0”或者在查询字符串已经添加的情况下存在使用'＆amp; special-test-value = 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;
}

好的，这是一个美好的夜晚。

Answer 2

两种方式，将文本包装在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>

Answer 3

似乎纯CSS全局样式不起作用，所以我使用jQuery将类添加到具有图像的锚点，如下所示：

jQuery("a").each(function(){
if ( jQuery(this).children('img').length > 0 ) {
jQuery(this).addClass("noborder");
}
});

CSS是：

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

a.noborder:hover {
    border-bottom: none;
}

感谢所有意见和建议。

干杯！

Answer 4

你可以为图像链接创建一个单独的类：

＆＃13;

a:hover {
  color: #492512;
  border-bottom: 2px dashed #94705A;
}
a.image-anchor:hover {
  border-bottom: 0 none;
}

＆＃13;

<p><a href="stackoverflow.com">Text link</a></p>
<p><a class="image_anchor" href="stackoverflow.com"><img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png"></a></p>

＆＃13;

CSS链接不用于图像

4 个答案: