Question

我正在这里开设一个新网站：http://dsrp.tv/newdurak

我正在尝试为文本添加黄金渐变并在悬停时将其删除。我无法弄清楚如何使用插件删除或更改渐变，所以我尝试通过添加CSS类来实现。我需要一个适用于Firefox的解决方案，所以我不能使用background-clip。

当前解决方案的问题是悬停状态文本跳转到第一个鼠标悬停事件。我试图在文档加载时提前触发mouseover事件，但这似乎不起作用。

这是我试过的触发器：

$(document).ready(function(){
        //gold gradient for text
        $(".gold").pxgradient({
          step:4,
          colors: ["#efcd83", "#e9c279", "#d29856", "#cf9354"],
          dir: "y"
        });         

        $('.gold')
            .mouseenter(function() {
                $( this ).addClass('noshadow')
                         .addClass('pressed')
                         .addClass('hover');
            })
            .mouseleave(function() {
                $( this ).removeClass('noshadow')
                         .removeClass('pressed')
                         .removeClass('hover');
            });     

        //trigger hover on load
        $('li.gold').trigger('mouseenter'); 
        $('li.gold').trigger('mouseleave');

    });

以下是该插件的链接：jquery text gradient plugin

我有两个问题：

是否可以从文本中删除渐变，以便我可以使用jQuery悬停悬停状态？
是否可以阻止文本跳过第一个mouseenter事件？

Answer 1

此解决方案有效。它需要在添加和删除类之间的延迟。

$(window).load(function(){
        $('.gold').addClass('noshadow')
                  .addClass('pressed')
                  .addClass('hover');
        setTimeout(function (){                       
            $('.gold').removeClass('noshadow')
                     .removeClass('pressed')
                     .removeClass('hover');
            }, 500);    
    });

使用jQuery插件进行渐变，添加类以创建导致跳转文本的悬停效果

1 个答案: