3

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

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

a{
    color: #6A737B;
    text-decoration: none;
}
a:hover{
    border-bottom: 1px solid #C60B46;
    text-decoration: none;
}

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

<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>
4

7 回答 7

2

执行此操作的唯一静态方法是使用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:hoverCSS 类之后声明它。

于 2013-04-22T13:37:16.040 回答
2

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

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

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

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

于 2013-04-22T13:50:01.730 回答
1

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

jQuery 技术是这样的：

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

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

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

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

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

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

我希望这会有所帮助！

于 2013-04-22T13:33:37.290 回答
1

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

a.imglink:hover{
  border:0;
}

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

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

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

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

于 2013-04-22T13:18:26.237 回答
1

实现这一点的另一种方法是简单地制作链接中的图像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;
}
于 2013-04-22T13:40:27.880 回答
0 
a:hover img {
border-bottom:none;
}

也许...

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

}
于 2013-04-22T13:16:17.793 回答
0

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

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

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

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

  2. 使用 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
    }
}
于 2013-04-22T13:33:54.770 回答