我正在这里的新站点上工作: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);
});