HTML：删除图像的：悬停？

Posted 2023-03-05

【中文标题】HTML：删除图像的：悬停？

【英文标题】：HTML: remove a:hover for images?

【发布时间】：2010-11-05 01:23:02

【问题描述】：

对于文本链接，我有：

CSS：

a:link color: #3366a9; text-decoration: none
a:hover border-bottom: 1px solid; color: black

但这也会在我不想要的可链接 IMG 上添加黑色下划线。

如何在使用 CSS 悬停时删除可链接 IMG 上的 border-bottom？

我尝试了以下方法：

a:hover img border-bottom: 0px

但这不起作用

Live example（尝试将鼠标悬停在左上角的徽标上）

【问题讨论】：

我刚刚检查了现场示例，它在 Safari 4 Mac 和 IE 7 Windows 中运行良好。您是否忘记将此问题标记为已回答？

@rpflo，使用 Firefox 3.5RC 和 IE6 - 将鼠标悬停在徽标上时会出现黑色边框。似乎只有 webkit 才能做到预期

现场示例链接需要登录。

【参考方案1】：

如果您将图像浮动与内联，这将起作用，并且不需要修改史蒂夫回答所需的图像链接属性。

a:hover img 
border: none !important;
display: block;

【参考方案2】：

a:hover img border-bottom: 0px;

这应该可以解决问题。

【讨论】：

他为 anchors 分配了一条规则，因此说明里面的东西没有边框不会影响实际的悬停标签

我已经链接到上面主要帖子中的实时示例......以防万一。

嗯，奇怪的是底部边框只显示在 IE8 中。经过测试的兼容模式（不显示任何边框）和 Chrome 3.0（按预期工作）。是否直接在图像的类上指定 :hover 也不起作用？

为了让它在 IE8 中工作，我在 css 文件中的 a:hover 下面添加了这个：img border:0px;

@Relster，使用 Firefox 3.5RC 为我显示底部边框

【参考方案3】：

不确定这是否是最佳解决方案，但它确实有效：

    a:link color: #3366a9; text-decoration: none
    a:hover border-bottom: 1px solid black; 

    .aimg:link color: #3366a9; text-decoration: none      
    .aimg:hover  border-bottom: none; 

然后将带有图像的锚点设置为“aimg”类：

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

【讨论】：

@seanmonstar，“>”选择器实际上是“有”吗？

不，> 表示直系子女。 div > a 选择 asdf 但不选择

【参考方案4】：

这在 IE 中也适用于我。 IE 显示了边框，但现在它不再显示了。

a img /*whatever you need*/
border: none !important;

a img:hover/*whatever you need*/

【参考方案5】：

在这里找到这个例子：https://perishablepress.com/css-remove-link-underlines-borders-linked-images/

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] 
    text-decoration: none;
    border: 0 none;
    

这正是我想你想要的。 在 Firefox 中完美运行，从包含给定格式图像的链接中删除所有效果。

【参考方案6】：

我使用 jQuery 为所有包含图像的标签添加了一个“no-hover”类：

$('a > img').each(function() 
  $(this).parent().addClass('no-hover');
);

在 CSS 中我这样做了：

a.no-hover:hover 
  border-bottom: 0px

如果 jQuery 对你来说太重了，你可以使用picoQuery。只要您选择 .each() 方法，它只有 1k。

【参考方案7】：

你试过a img border:none吗？

【讨论】：

我已经链接到上面主要帖子中的实时示例......以防万一。