Question

我目前正在尝试为我的链接添加悬停淡入效果，并且我已经完成了，但是在效果发生的同时，链接仍然没有活动几秒钟。我尝试淡化链接中的img元素，但这不起作用。我切换.mouseover（）到.hover（）仍然无法正常工作。

以下是代码：

$(".tabButtons a").mouseover(function() {
 $(this).css("opacity","0");        
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButtonHover.png)");
$(this).animate({opacity: 1}, 500);       
});

$(".tabButtons a").mouseout(function() {
$(this).stop();
 $(this).css("opacity","1");
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButton.png)");
});

有什么建议吗？ Here是发生这种情况的页面:(中间有一排大灰色按钮）

Answer 1

尝试在<span>标记内添加<a>标记，并在<span>标记上执行所有动画操作。将<span>和<a>标记设为固定尺寸。

Answer 2

$(".tabButtons a").mouseenter(function() {
 $(this).css("opacity","0");        
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButtonHover.png)");
$(this).animate({opacity: 1}, 500);       
});

$(".tabButtons a").mouseleave(function() {
$(this).stop(true,true);
 $(this).css("opacity","1");
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButton.png)");
});

在完成效果之前链接不活动

2 个答案: