Question

我有一张图片，在图片上我放了一个超链接。现在当用户鼠标进入图像时，该超链接需要显示，如果再次离开图像则需要隐藏超链接。我做的非常简单。

问题是，隐藏/显示效果很好。显示超链接后，我需要点击该超链接进入下一页。但是超链接的onmouseover会使链接闪烁。它眨眼。如何解决这个问题？

我写的代码是：

$('img.col-image1').mouseenter(function(){
        $(this).siblings('a.plus-sign').show();   
    }).mouseleave(function(){
        $(this).siblings('a.plus-sign').hide();   
    }

)

是我的代码的任何问题，或者我需要添加任何特殊的事件处理程序，以避免链接上的闪烁onmouseover？

请访问：

http://jsfiddle.net/RLfNu/

Answer 1

我分解了你的解决方案并提出了一个在Firefox中运行的解决方案：http://jsfiddle.net/4mhGb/

Answer 2

我认为你的做法是错误的（正如我自己做的那样）。

对于像这样简单的事情你可以用CSS做。如果你想使用jQuery.fadeIn和jQuery.fadeOut为它设置动画，那么我会在CSS上使用JavaScript。

请参阅我在jsfiddle上的示例：http://jsfiddle.net/5pgvC/2/

我将图片和链接包装在另一个div中：

    <div class="col-holder">
        <a class="removed plus-sign" href="publishing.html">next</a>
        <img class="col-image1" src="http://www.tnpsc.com/downloads/NaturesScenery.jpg" width="221" height="114" alt="Publishing" />

    </div>  
    <p>Whitefield has a deep heritage in the publishing industry. We know how content is developed, managed and consumed. </p>
    <a class="view-case-study" href="publishing.html"><span><strong>Read more</strong></span>
    </a>

然后添加：为它悬停CSS：

.col-holder:hover a.plus-sign{
    display: block;   
}

这将停止闪烁。

Answer 3

使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

因为IE6遭受闪烁事件

Answer 4

我认为包装正在悬停的项目会更加语义化（而不是将悬停事件附加到单独的元素上）。

演示：http://jsfiddle.net/wdm954/zS3rc/2

<span class="hoverimg">
    <a class="removed plus-sign" href="publishing.html">next</a>
    <img class="col-image1" src="/path" width="221" height="114" alt="Publishing" />
</span>

添加到CSS ...

a.plus-sign {
    display: none;
}

...的jQuery

$('.hoverimg').hover(function(){
    $(this).find('a.plus-sign').toggle();   
});

鼠标悬停时链接闪烁

4 个答案: