Question

我被指示在网站上建立链接的颜色不同于字体颜色。这一切看起来都很简单，使用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" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>

Answer 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类之后声明此内容。

Answer 2

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

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

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

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

Answer 3

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

a.imglink:hover{
  border:0;
}

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

a img{
    margin:0 0 -1px 0;
}

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

这是显示负裕度解决方案的小提琴：http://jsfiddle.net/QRXGe/

Answer 4

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

jQuery技术将是这样的：

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

这将从所有将图像作为直接后代的锚标记中删除“border-bottom”样式。但是你会在每个页面上都需要它，并且每个页面都会被这个脚本解析，所以每个页面都会增加一些额外的开销。

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

a.img-link{ border-bottom:none; }

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

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

我希望有所帮助！

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

Answer 6

a:hover img {
border-bottom:none;
}

或者也许......

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

}

Answer 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
    }
}

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

7 个答案: