翻轉效果，顯示另一個圖像

我在這個標記中有一個href圖像。翻轉效果，顯示另一個圖像

<div class="imgdiv"> 
    <a class="imga" href="http://destination.com"> 
     <img src="http://image.com/image.jpg" width="100" height="100"> 
    </a> 
</div>

當我將鼠標懸停在上面時，我想在右上角顯示另一圖像。這是可行的與CSS？或者我需要JavaScript的呢？

我的CSS看起來是這樣，但它仍然無法正常工作

a.imga:hover { 
    background-image: url('over.png'); 
    background-position: top; 
    z-index:3; 
}

來源

2011-01-29 zmol

退房CSS：懸停http://htmldog.com/guides/cssintermediate/pseudoclasses/ –

嘗試CSS精靈，check out this screen-cast從css-tricks.com如何使用它們。

來源

2011-01-29 08:46:02 nowayyy

您可以imgdiv類的DIV使用:hover pseduo選擇與background-position適當設置顯示在右上角。當然，你應該先申請background-image。

請注意，:hover在鏈接以外的任何內容中都不起作用。但是，您可以通過使用javascript/jquery來克服此限制。

來源

2011-01-29 08:40:43 Sarfraz

@zmol：嘗試使用'Z-index'財產與你div的價值。 – Sarfraz

可以使用的CSS做，但insted的img標籤的使用DIV與背景圖像

<div id="image"></div>

CSS樣式

 #image{ 
      width: 100px; //Image height 
      height: 100px; //Image width 
      background: url('') 0 0 no-repeat; //Give your image path here 
     } 

     #image:hover{ 
      background: url('') 0 0 no-repeat; 
     }

來源

2011-01-29 08:44:03 KillerFish

請注意'：hover'在IE6中對鏈接以外的任何東西都不起作用:) – Sarfraz

@Sarfraz：是的IE6不支持。然後我們可以使用jQuery來做到這一點。 – KillerFish

**Here is the solution you can try** 

<div class="imgdiv"> 
     <a class="imga" href="http://destination.com"> 
      <img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100"> 
     </a> 
</div>

來源

2014-04-22 05:30:16 wahid

翻轉效果，顯示另一個圖像

回答

相關問題