4

我正在尝试创建以下效果：当我将鼠标悬停在我的链接上时，该链接会改变颜色，这部分工作但我的代码的问题是当我悬停时我看不到我的文本。我知道我可以通过将图像添加到我的跨度和锚标记来解决这个问题，而且我也知道有一个可以为颜色设置动画的插件，但是如果可能的话，我想在没有背景图像和插件的情况下解决这个问题。那可能吗？
我创建了这个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
            });
        });
    });
});
4

4 回答 4

3

好吧，您已经在使用 jQuery，为什么不使用 jQuery UI（您引用的插件）并使用一个元素完成所有操作。

想一想，你会记得.yellow每次想要这样的链接时都包含那个额外的跨度吗？

另外，为什么不使用渐进增强并使用 CSS 来完成这一切呢？你甚至可以为 IE 做一个 jQuery 后备？

请参阅我附加的小提琴。

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

于 2012-07-03T07:24:38.287 回答
1

如果我了解您在这里要实现的目标，那么这似乎可以通过一行 CSS 来解决。例如..

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

您看不到文本的原因是导致 opacity: 0 使其不可见。

于 2012-07-03T07:05:28.010 回答
1

我玩弄不透明度来得到这个结果，现在看起来好多了http://jsfiddle.net/kyWth/37/链接的不透明度和跨度不透明度现在都设置为 0.5。离你想要的很近吗？

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

于 2012-07-03T07:25:48.437 回答
1

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

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

于 2012-07-03T07:21:15.947 回答