Question

$(function () {
    $(".btn").on("mouseover",function(){
        $(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
    });

    $(".btn").on("mouseleave",function(){
        $(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
    });
});

以上代码是我在用户悬停在按钮上时更改图像的方式，当用户点击它时，它将重定向到其他页面。而Html元素就像：

<a href="product.php"><img class="btn" src="images/index_03.gif" /></a>

问题是，我确信路径是正确的，但是当用户点击按钮时，在加载下一页的过程中，或者在某些情况下，当我将鼠标悬停在图像上时，未显示悬停的图像但是断了的链接，它为什么以及如何修复它？谢谢你的帮助

Answer 1

$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));

此代码每次（或从缓存）重新加载图像。

因此，在页面加载期间，由于其他数据也同时加载，因此onhover图像加载将会很慢或被破坏。

我建议你应该同时加载两张图片并放在同一位置，并在悬停时显示/隐藏它们以获得更快的效果。

Answer 2

使用CSS sprites而不是javascript调用将消除鼠标悬停闪烁，并减少网站所需的http请求总数（使其加载速度更快）。

您可以使用css'：hover'pseudo element来改变图像的'clip'属性（IE6及更高版本支持），从而实现相同的'鼠标悬停'功能。

查看这些CSS技巧文章： CSS Sprites: What They Are, Why They’re Cool, and How To Use Them。
CSS Sprites with Inline Images

为什么图像会在悬停时偶尔被破坏

2 个答案: