css - 将鼠标悬停在 PNG 图像上时背景偏移/扭曲

Question

这是我在 Chrome 中遇到的问题。在 Firefox 中不会发生这种情况。我将在底部提供 CSS、HTML 和 Jquery 示例。

问题:当我将鼠标悬停在 PNG 上(现在恰好位于轮播 jquery 插件中)时，悬停图像会替换初始 PNG。甚至当我使用 Jquery 的拖放功能拖动元素时也会发生这种情况。它工作时没有任何问题，但是当它发生时背景会稍微移动或扭曲一秒钟。这不是一个很好的用户体验，我想知道是否有人知道如何解决它。让我知道您需要查看哪些代码。

代码示例

HTML:

<li id="img-home"><img id="img-home-src" src="<?php echo base_url();?>files/assets/images/homepage/img.png" alt="" /></li>

CSS:

li {
    text-align: center;
    cursor: pointer;
}

#img-home
{
    border:0;
    width:386px;
    height:484px;
    overflow:hidden;
    display: inline-block;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#img-home-src
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;border:0;

}

Jquery:

       $("#img-home").hover(
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img_hover.png");
    }, 
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img.png");
    }
  );

Answer 1

我认为(正如之前的答案所提到的)这是一个缓存/加载问题。简单的修复方法是通过 CSS 设置一个 background-image ，以便它预加载图像:

演示:http://jsfiddle.net/SO_AMK/cgMxe/4/

HTML(CSS 声明为内联，以便您仍然可以轻松使用 PHP):

<li id="img-home">
    <img id="img-home-src" src="http://dummyimage.com/386x484/000/0011ff&text=Test+Image" style="background-image: url(<?php echo base_url();?>files/assets/images/homepage/img_hover.png);" alt="" />
</li>​

CSS:相同

jQuery:相同