停止将 CSS 'a' 样式应用于链接的图像

Posted 2023-03-06

【中文标题】停止将 CSS \'a\' 样式应用于链接的图像

【英文标题】：Stop CSS 'a' styles being applied to images that are linked停止将 CSS 'a' 样式应用于链接的图像

【发布时间】：2013-04-15 09:51:18

【问题描述】：

我被指示让网站上的链接具有与字体颜色不同的颜色下划线。这一切看起来都很简单，使用border-bottom 如下，除了链接的图像现在也加了下划线。

有没有办法在不使用 JS 的情况下停止发生？

a
    color: #6A737B;
    text-decoration: none;

a:hover
    border-bottom: 1px solid #C60B46;
    text-decoration: none;

一个例子 - 现在将鼠标悬停在下面的图片上会添加 border-bottom CSS 样式，这是我不想要的 -

<a title="Dyne Drewett" href="http://test.dynedrewett.com">
    <img class="attachment-full"    src="http://test.example.com/Website-Header.png">
</a>

【问题讨论】：

给图像一个onclick事件处理程序并跳过锚标记怎么样？我们仅对文本节点使用锚标记。

这将依赖于通过浏览器启用 JS 的用户。虽然这对大多数人来说都很好，但有些人将无法按预期浏览该网站。谢谢。

【参考方案1】：

唯一的静态方法是在图片链接上使用class，例如：

<a href='http://whatever.url.here/' class='imglink'>
    <img src='img/image.png' alt='Alt text'>
</a>

然后对这个类应用一个 CSS 样式：

a.imglink:hover 
    border-bottom: 0px solid;

您必须在另一个 a:hover CSS 类之后声明它。

【参考方案2】：

从技术上讲，您不能根据元素包含的元素为其设置样式。您不能使 a 元素的边框取决于内部是否存在 img 元素（这就是您要处理的内容）。使用类会有所帮助，但从 cmets 看来，这是不可能的。

有一个解决方法：将每个图像放置在包含元素的底部（默认情况下不在基线上），并将其向下移动一个像素，或者任何边框宽度。这样，图像将覆盖底部边框，前提是图像没有透明度。 CSS 代码：

a img 
    vertical-align: bottom;
    position: relative;
    top: 1px;

这会稍微改变所有图像的位置，因此除非您采取预防措施，否则可能会影响整体布局。

【参考方案3】：

我建议在链接中添加一个类，这样你就可以这样做

a.imglink:hover
  border:0;

或者，如果您无法控制该类，您可以尝试为图像添加负边距以确保不显示边框：

a img
    margin:0 0 -1px 0;

-1px 可能需要根据您的其他规则进行调整

这是一个显示负边距解决方案的小提琴：http://jsfiddle.net/QRXGe/

【讨论】：

黑客是前进的方向。不理想，因为 CSS 现在应该真的能够处理这样的事情，但它可以在没有 JS 的情况下完成工作。感谢您的帮助。

没问题。实际上，我今天出于自己的目的正在研究 CSS 中父选择器的可能性，并遇到了这个页面：css-tricks.com/parent-selectors-in-css。那里有一些有趣的读物。

很高兴看到我不是唯一一个为此苦苦挣扎的人。我喜欢:parent 的想法，所以希望有一天能找到一种有效的整合方式。

【参考方案4】：

您的解决方案将要求您向包装图像的链接（或应删除边框的任何内容）添加额外的类名。除非您想使用 javascript 技术，否则没有办法进行“反向选择”。

jQuery 技术应该是这样的：

$('a > img').parent().css('border-bottom', 'none');

这将从所有将图像作为直接后代的锚标记中删除“边框底部”样式。但是每个页面都需要它，并且每个页面都被此脚本解析，因此每个页面都会增加一点开销。

否则，如果您有权访问 html，请创建一个 CSS 类来定位这些特定链接，例如：

a.img-link border-bottom:none; 

并将其应用于图像周围的任何链接，例如：

<a href="#" class="img-link"><img src="#"  /></a>

希望对你有帮助！

【参考方案5】：

实现这一点的另一种方法是简单地使链接中的图像relative 然后偏移底部以覆盖边框。 5px 似乎可以做到http://jsfiddle.net/ECuwD/

a
    color: #6A737B;
    text-decoration: none;

a:hover
    border-bottom: 1px solid #C60B46;
    text-decoration: none;


a img 
    position:relative;
    bottom: -5px;

【参考方案6】：

a:hover img 
border-bottom:none;

或许……

a:hover img.attachment-full 
  border-bottom:none;

【讨论】：

那仍然会为 a 添加边框

那行不通，因为添加了边框的是a。我担心 JS 可能是唯一的方法，因为我不认为 CSS 可以反向删除添加到父元素的样式。

如果他们在 a... 之前添加一个父 id 选择器会怎么样

我的建议是在 a 中添加一个类。

@daamsie - 这行不通。我必须为每个链接的图像添加一个 a 类，这不是一个真正的选择。

【参考方案7】：

显然，您想要的是基于其内容的相同标记 (<a>) 的不同行为。

遗憾的是，没有真正的方法可以使用纯 CSS 来做到这一点，因为这种语言不是编程语言，因此缺乏条件结构，例如if。

这并不意味着没有解决方案！以下是您可以做的几件事：

在您的 HTML 中声明（例如）元素 (<a>) 应以不同方式处理（使用类，在您的情况下为 <a class="text"> 或 <a class='image'>。

使用 JavaScript动态地 改变你的风格，这意味着基于条件，例如内容。在你的情况下，它可能是这样的：

function onLoad() 
    for (var element in document.body) 
        // look for links
        // if this is a link:
            // look for image inside link
            // if there is one:
                // remove the border