2

这是我在 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;

}

查询：

       $("#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");
    }
  );
4

5 回答 5

6

我认为（如先前的答案所述）这是一个缓存/加载问题。简单的解决方法是在其上设置一个background-imagevia CSS 以便它预加载图像：

演示：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：相同

于 2012-07-30T04:13:02.027 回答
6

你真的需要使用jQuery在悬停时切换图像吗？
这是一个相当繁重的解决方案，它也会产生缓存问题，因为新图像仅在悬停动作时才开始下载。

您可以使用纯 css通过sprite技术实现您的目标（改善用户体验），这将下载额外图像的时间减少到零，因为每个状态（悬停，活动）的每个图像组合成一个小图像，立即加载：

dabblet 上的演示

#img {
    width: 300px;
    height: 150px;
    background: url('//placekitten.com/g/300') no-repeat; 
}

#img:hover { background-position: 0 100%; }

阅读更多关于精灵的信息：

于 2012-07-30T06:59:46.643 回答
4

img元素是 native 的inline-block，因此不需要声明。如果您没有使用 CSS 重置，请查看Eric Meyer 的重置作为参考。它将有助于消除浏览器之间的渲染差异。

内联加载图像而不是作为 CSS 背景加载图像是有正当理由的 - 就这样吧。

**HTML**
<img src="img1" class="over">
<img src="img2" class="out">

**CSS**
@import url (reset.css);

img.over, img.out { position:absolute; z-index:2; }
img.out { z-index:1; }

**jQuery**
$('.over').mouseover(
    function() {
        $(this).next('img').css('z-index',3);
    }
);
$('.out').mouseout(
    function() {
        $(this).css('z-index',2);
        $(this).prev('img').css('z-index',3);
    }
);

我使用mouseover/out而不是hover因为一旦顶部图像被隐藏或推到堆栈的底部，浏览器就会将其解释为 hover:out （因此它成为一个闪烁的元素）。

高温高压

于 2012-08-01T19:33:30.507 回答
2

该代码对我来说似乎是合法的。我不能把它放在上面的评论中，所以这只是意见，而不是回答。可能会发生这种情况，因为在加载页面的同时加载了第一张图片，而第二张图片是按需加载的。在悬停功能和从服务器完整下载图像之间，背景会移动一秒钟。尝试在页面上的某个位置调用第二张图片，就在顶部，然后给她 display:hidden 或类似的东西。重点是加载将保存在现金中并在调用悬停功能时使用的图像。

于 2012-07-30T03:53:01.080 回答
1

不幸的是，我没有充分探索这个问题，无法准确指出原因是什么，但我发现了问题所在。我没有向大家提及代码的其他部分，因为我不知道这是问题的原因。所以，在这件事上道歉是必要的。

罪魁祸首是页面的背景图片。这是 CSS 读取的内容：

.background {
    background:url(../images/background/5.jpg) no-repeat;
    background-size:100% auto;
    -moz-background-size: 100% auto;         /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% auto;           /* Opera 9.5 */
    -webkit-background-size: 100% auto;      /* Safari 3.0 */
    margin:0;
    padding:0;
    opacity: 1;
    height: 100%;
    position:absolute;
    width:100% !important;
    z-index:-2000;
    left:0;
    top:0;
}

所有这些代码在 Firefox 和其他浏览器中都可以正常工作，但在 Chrome 中却不行。chrome出现问题的原因是background-size:100% auto;生产线。为了解决这个问题，我这样做了：

HTML： <img src="5.jpg" class="bg" />

CSS：

.bg {
    width:100%;
    margin:0;padding:0;border:0;
    height: auto;
    min-width:960px;
    z-index:-2000;
    position:absolute;
}

瞧。在拖放和悬停事件中都没有失真问题。

于 2012-08-04T23:21:18.360 回答