Question

我正在尝试创建以下效果：当我悬停在我的链接上时，该链接会改变颜色，这部分工作但我的代码的问题是当我将鼠标悬停在上面时，我看不到我的文字。我知道我可以通过向我的span和anchor标签添加图像来解决这个问题，而且我也知道有一个动画颜色的插件，但 如果可能 我想解决这个没有背景图片和插件。那可能吗？
我创建了这个FIDDLE让你看到我的问题。

我的代码：

$(document).ready(function () {
    $('.link').hover(function () {
        var heightCheck = $(this).outerHeight();
        //alert(heightCheck);
        $(this).stop().animate({
            opacity: 0
        }, 1000);
        $('.yellow').height(heightCheck);
        $('.yellow').css({
            'margin-top': -heightCheck
        });
    }, function (heightCheck) {
        $(this).stop().animate({
            opacity: 1
        }, 1000, function () {
            $('.yellow').css({
                'margin-top': +heightCheck
            });
        });
    });
});

Answer 1

好吧，你已经在使用jQuery，为什么不使用jQuery UI（你引用的插件）并用一个元素做所有事情。

考虑一下，每次想要这样的链接时，你是否会记得包含额外的.yellow范围？

另外，为什么不使用渐进增强功能并使用CSS完成所有操作？你甚至可以为IE做一个jQuery后备吗？

见我附上的小提琴。

http://jsfiddle.net/nzcGy/3/

Answer 2

如果我理解你在这里想要实现的目标，这看起来就像用一行CSS解决了。 e.g ...

.link:hover { background-color: yellow;}

您无法看到文字的原因是导致不透明：0使其不可见。

Answer 3

更改它以使灰色背景颜色应用于li样式而不是链接本身。取下.link的动画不透明度线。

也许是这样的？ http://jsfiddle.net/5bXHW/

Answer 4

我使用不透明度来获得此结果，现在看起来好多了http://jsfiddle.net/kyWth/37/链接的不透明度和跨度不透明度现在都设置为0.5。是否接近你想要的东西？

更新在此处对您的代码进行了更改http://jsfiddle.net/kyWth/39/，效果很好，您也不需要跨度。

动画不透明会弄乱我的文字

4 个答案: