为什么图像偶尔会因悬停而损坏答案

【问题标题】：Why the image is broken occasionally with the hover为什么图像偶尔会因悬停而损坏
【发布时间】：2013-10-20 23:49:28
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html image hover

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：