在懸停中更改li元素上懸停的當前圖像的背景

我使用一組元素來製作圖像網格，並且需要在懸停在li中的每個圖像時添加懸停效果。我得到它與CSS的不透明屬性爲.grid李正常工作：我設置了懸停。當我在這裏設置背景圖像時，它不顯示。加載瀏覽器並使用檢查器顯示當我將鼠標懸停在圖像上時加載的圖像，但在視覺上它不顯示。我試圖設置更高的Z指數等，沒有運氣。在懸停中更改li元素上懸停的當前圖像的背景

如果更好，我願意這樣做，因爲每個圖像都有自己不同的懸停狀態。

HTML：

<div class="container"> 
<ul class="grid"> 
    <li><a href="link.html"><img src="images/image1.jpg"></a></li> 
    <li><a href="link.html"><img src="images/image2.jpg"></a></li> 
    <li><a href="link.html"><img src="images/image3.jpg"></a></li> 
</ul> 
</div>

CSS：

ul.grid { 
    list-style: none; 
    margin: 20px auto 0; 
    width: 798px; 
    } 

.grid li { 
    float: left; 
    margin: 0px 4px 0px 0px; 
    } 

.container { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top:50px; 
    width: 513px; 
    } 

.grid li a img:hover { 
    background: url(images/image1_hover.jpg) no-repeat; 
    } 

.grid li img { 
    background-color: white; 
    margin: 0; 
    width: 262px; 
    height: 200px; 
    } 

.grid li a { 
    display: block; 
    }

來源

2012-12-14 cibit

您遇到了與蘋果和桔子的問題。你有橘子（背景）上的蘋果（IMG）標籤...所以改變背景是工作，但你的IMG坐在上面--Z指數不會幫助你。在這種情況下，單獨使用背景圖像。見下文。

編輯：我看到你也希望他們成爲鏈接。以下內容適用於你。

這就是說，我實際上會使用一個精靈而不是在這種情況下有6個不同的圖像。而且，下面的CSS可能會進行優化，並且可以肯定，通過小於或SASS優化 - 但它是近4上週五，該公司微絲錐流動;）

<html> 
<head> 
    <style type="text/css"> 
     ul.grid { 
      list-style: none; 
      margin: 20px auto 0; 
      width: 798px; 
     } 

     .grid li { 
      float: left; 
      margin: 0px 4px 0px 0px; 
     } 

     .container { 
      margin-left: auto; 
      margin-right: auto; 
      margin-top:50px; 
      width: 513px; 
     } 

     .grid li a { 
      background-color: white; 
      margin: 0; 
      width: 50px; 
      height:50px; 
     } 

     .grid li a { 
      display: block; 
      } 

     .img1 { 
      background: url(images/image1.jpg) no-repeat; 
     } 

     .img1:hover { 
      background: url(images/image1_hover.jpg) no-repeat; 
     } 

     .img2 { 
      background: url(images/image2.jpg) no-repeat; 
     } 

     .img2:hover { 
      background: url(images/image2_hover.jpg) no-repeat; 
     } 

     .img3 { 
      background: url(images/image3.jpg) no-repeat; 
     } 

     .img3:hover { 
      background: url(images/image3_hover.jpg) no-repeat; 
     } 
    </style> 
</head> 

<body> 
    <div class="container"> 
    <ul class="grid"> 
     <li><a href="link.html" class="img1"></a></li> 
     <li><a href="link.html" class="img2"></a></li> 
     <li><a href="link.html" class="img3"></a></li> 
    </ul> 
    </div> 
</body> 
</html>

來源

2012-12-14 23:37:49

您可以使用一些有一個更容易的時間jquery在鼠標懸停時更改圖片的源標籤。

來源

2012-12-14 23:42:13

在懸停中更改li元素上懸停的當前圖像的背景

回答

相關問題