Html CSS链接悬停不适用于图像

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

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

问题是，包装在链接中的图像也有此边框底部，例如

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

---

如何将a:悬停设置为仅用于文本链接？纯CSS更好。

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

a：悬停{
颜色：#492512；
边框底部：2个虚线#94705A；
}
a、 图像锚定：悬停{
边框底部：0无；
}

没问题

将类添加到文本链接中。然后像这样瞄准那些链接

a.测试：悬停{
颜色：#492512；
边框底部：2个虚线#94705A；
}

---

有两种方式，一种是将文本包装成

span

（以下示例），另一种是将唯一类设置为仅包含文本的链接

a{
文字装饰：无；
}
a:悬停{
颜色：#492512；
}
a:悬停：非（img）{
边框底部：2个虚线#94705A；
}

纯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;
}

感谢所有的意见和建议

---

干杯

使用纯CSS，您需要用类名标记

标签：

，然后使

a:hover:not（.image link）{border bottom:2px虚线；

你能更改html标记吗？@MarcspérezGude我试过了，它对我不起作用..我错过了一些东西？是的，这可能是一个解决方案，但对于CMS生成的站点来说有点笨拙。我还想到了一个jQuery解决方案，它只是在所有具有图像的s中添加一个类，然后将其作为目标，如果没有纯CSS解决方案是可能的。这仍然会在图像链接上生成一个边框底部，这是不应该考虑的。这也可能是一个解决方案，但我最好在图像中添加一个类，我认为我的情况更清楚（网站上的图像链接更少）我建议你把你的2次编辑回滚，即使它们确实解决了一些罕见的需求，但它们确实是混乱的解决方案，并且只保留第一次，顺便说一下，这可能是最好的答案，+1来自我。