悬停时下划线扩展到背景

读者 Jaime Morrison 通过电子邮件发送

我一直都在考虑使用一种链接样式，其中链接的下划线在悬停时“向上滑动”以成为背景高亮。

我开始思考如何自己实现这一点的一些想法。最终，我尝试了两件事，但没有一件是绝对完美的。

尝试一

我们知道我们将在这里使用 jQuery（或某些 JavaScript 库），因为需要动画。我的第一个想法是在链接上设置相对定位，然后使用 jQuery 将空的 <span> 附加到每个链接。span 的高度为 1px（类似于下划线），绝对定位在底部向下 1 像素，并具有 100% 的宽度（与链接一样长）。然后，在悬停时，您将 span 的高度动画设置为行高。

$(function() {

    var $el = $(),
        linkHeight = parseInt($("p").css("line-height")),
        speed = 175;  //  1000 = 1 second
    
    $("#first a").each(function() {
    
        $el = $(this);
        
        // If the link spans two lines, put a line break before it.
        if ($el.height() > linkHeight) {
            $el.before("<br />");  
        }
        
        $el.prepend("<span></span>");
    
    }).hover(function() {
        
        $el = $(this);
                
        $el.find("span").stop().animate({ height: linkHeight, opacity: 0.3 }, speed);
    
    }, function() {
    
        $el = $(this);
                
        $el.find("span").stop().animate({ height: "1px", opacity: 1 }, speed);
    
    });

});

事实证明，这有点有效，但它充满了许多奇怪的问题和跨浏览器不一致。例如，如果链接分成两行怎么办？在这种情况下，span 肯定无法正常工作。所以我尝试通过首先测量链接的高度，如果它高于行高（如果它是两行，则会是这样），然后在它前面插入一个换行符，以便它都在一行上。有效，但它可能会创建一些奇怪的参差不齐的段落。

其他更主要的问题：任何版本的 IE 都无法正确向上动画 span。span 将始终位于文本的顶部，因此它需要具有不透明度才能使文本可读。我尝试将文本包装在 <em> 中并使用 z-index 与之抗衡，但没有用。即使在 Firefox 中，出于某种原因，开始新行的链接也不想工作。

因此，尝试一失败了……

尝试二

在我看来，尝试一最大的问题是多行链接。在尝试思考解决方法时，使用实际的背景链接的属性似乎是最好的方法。

在这种尝试中，我创建了一个红色的大色块作为图像。我将其设置为链接的背景，但使用背景定位将其向下推。我将链接上的溢出设置为隐藏，并将该背景向下推到足以使一小部分显示出来。然后，在悬停时，背景位置会动画化，将其拉回到整个链接下方。

$(function() {

    var $el = $(),
        speed = 175;  //  1000 = 1 second

    // SECOND TECHNIQUE
    $("#second a").hover(function() {
        
        $el = $(this);
                
        $el.stop().animate({ backgroundPosition: "(0px 0px)", color: "white" }, speed);
    
    }, function() {
    
        $el = $(this);
                
        $el.stop().animate({ backgroundPosition: "(0px 15px)", color: "#900" }, speed);
    
    });

});

此技术的一个问题是不同浏览器如何处理行高。如果我在 Firefox 中将下划线设置为 1px 高，许多浏览器（例如 WebKit）根本不会显示下划线，因为行高显然少 1 像素，因此整个背景图像被隐藏。因此，我在 Firefox 中将其设置为 2px 高，然后 WebKit 将其显示为 1px。不一致，但有效。

这将是一个“完美”的解决方案，除了 IE 7 会对多行链接或开始新行的链接进行修补，从一开始就覆盖整个链接的背景。IE 8 则正确处理了这种情况。

因此，最终，这两个都不完全完美。如果您有此“下划线动画向上成为悬停时的背景”的其他解决方案，请告诉我。

您可以在此处查看演示。

更新

正如一些人建议的那样，我添加了技巧＃3，它是＃2的改编。链接现在具有 1px 的底部边框（边框颜色和背景颜色匹配），并且背景从更远的距离向上滑动，这应该可以解决 IE 7 问题。