0 
$(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>

问题是，我确定路径是正确的，但是当用户单击按钮时，在加载下一页期间或在某些情况下，当我将鼠标悬停在图像上时，悬停的图像未显示但链接断开，为什么会这样以及如何解决？感谢您的帮助

4

2 回答 2

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

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

因此，在页面加载过程中，由于同时加载了其他数据，悬停图像加载会变慢或损坏。

我建议您应该同时在同一位置加载两个图像，并在悬停时显示/隐藏它们以获得更快的结果。

于 2013-10-13T08:17:51.207 回答
0

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

您可以通过使用 css ':hover'伪元素来更改图像的 'clip' 属性来实现相同的 'mouseover' 功能（在 IE6 及更高版本中支持）。

查看这些 CSS 技巧文章： CSS Sprites：它们是什么，为什么它们很酷，以及如何使用它们。
带有内联图像的 CSS 精灵

于 2013-10-13T09:00:34.283 回答