我正在这里的新站点上工作:http://dsrp.tv/newdurak

我正在尝试为文本添加金色渐变,并在悬停时将其删除。我不知道如何使用插件删除或更改渐变,因此我尝试通过添加CSS类来实现。我需要一个可在Firefox中使用的解决方案,因此无法使用background-clip。

当前解决方案的问题是,悬停状态文本在第一个mouseover事件上跳转。我试图在文档加载时提前触发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事件上跳转?

最佳答案

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

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

10-06 08:51
查看更多