为什么图像与悬停

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

的问题是，我可以肯定的路径是正确的，但是当用户点击该按钮，在加载下一个页面或在某些情况下的时候，当我悬停在图像上，悬停的图像没有显示，但断开的链接，为什么它是如何修复它？感谢您的帮助

来源

2013-10-13 user782104

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

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

因此，在页面加载期间，由于其他数据也在同时加载，因此onhover映像加载速度会变慢或中断。

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

来源

2013-10-13 08:17:51 IhteshamHussain

感谢您的帮助，它清楚了概念 – user782104

使用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

来源

2013-10-13 09:00:34 musophob

为什么图像与悬停

回答

相关问题