將鼠標懸停在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

該代碼看起來合法的對我來說。我不能在上面的評論中提到這一點，所以這只是意見，而不是回答。也許會發生這種情況，因爲第一張圖片是在頁面加載的同一時間加載的，並且secon是按需加載的。在懸停功能和從服務器完整下載圖像之間，背景會被移動一秒鐘。嘗試在頁面上的某個位置調用第二個圖像，並將它放在顯示屏上：隱藏或類似的東西。要點是加載將以現金保存並在調用懸停功能時使用的圖像。

Answer 2

我認爲（如以前的答案所述），這是緩存/加載問題。簡單的解決方法是設置爲通過它的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的：同

Answer 3

你真的需要使用jQuery的在懸停上切換圖像？
這是一個相當沉重的解決方案，它也會造成緩存問題，因爲只有在懸停操作時新圖像纔會開始下載。

您可以使用純CSS與精靈技術，它減少下載其他圖像的時間零，以實現自己的目標（改善用戶體驗），因爲每個圖像的每個狀態（懸停，主動）的結合在一個小圖像，裏面裝瞬間：

Demo on dabblet

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

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

瞭解更多關於精靈：

• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Answer 4

img元件是本身inline-block，所以不需要該聲明。如果您未使用CSS重置，請查看Eric Meyer's重置作爲參考。它將有助於消除瀏覽器之間的渲染差異。

有合理的理由來加載圖像內聯而不是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因爲一旦頂部圖像被隱藏或壓入堆棧的底部，瀏覽器將其解釋爲懸停

：輸出（因此它成爲一個閃爍的元素）。

HTH

Answer 5

不幸的是，我並沒有探索的問題，足以針點的原因恰恰是，但我發現這個問題。我沒有提到代碼的其他部分，因爲我不知道這是問題的原因。所以，這一個道歉是必要的。

罪魁禍首是頁面的背景圖像。這裏是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中無法正常工作。鉻合金存在問題的原因是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; 
} 

瞧。在拖放和懸停事件中都不會出現失真問題。