如何讓圖像懸停在CSS？

Question

我想將圖像從正常更改爲更亮時，它的懸停，我的代碼：

<div class="nkhome"> 
     <a href="Home.html"><img src="Images/btnhome.png" /></a> 
    </div> 
.nkhome{ 
    margin-left:260px; 
    top:170px; 
    position:absolute; 
    width:59px; 
    height:59px; 
} 
.nkhome a img:hover { 
    background:url(Images/btnhomeh.png); 
    position:absolute; 
    top:0px; 
} 

爲什麼不起作用懸停？當我的鼠標在上面時，它顯示第一個圖像，而不是懸停圖像。

Answer 1

你有一個a標籤包含一個img標籤。這是你的正常狀態。 然後，您添加一個background-image作爲懸停狀態，並且它出現在您的a標記的背景中 - 位於img標記的後面。

你或許應該創建一個CSS Sprite和使用後臺位置，但這應該讓你開始：

<div> 
    <a href="home.html"></a> 
</div> 

div a { 
    width: 59px; 
    height: 59px; 
    display: block; 
    background-image: url('images/btnhome.png'); 
} 

div a:hover { 
    background-image: url('images/btnhomeh.png); 
} 

這A List Apart Article from 2004仍然是相關的，會給你的精靈的一些背景知識，以及爲什麼它是一個很好的想法使用它們而不是兩個不同的圖像。比我能向你解釋的任何東西寫得好得多。

Answer 2

嗨，你應該給父母地位相對和孩子絕對的，給予高度或寬度絕對類作爲這樣

的CSS

.nkhome{ 
    margin-left:260px; 
    width:59px; 
    height:59px; 
    margin-top:170px; 
    position:relative; 
    z-index:0; 
} 
.nkhome a:hover img{ 
    opacity:0.0; 
} 
.nkhome a:hover{ 
    background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'); 
    width:100px; 
    height:100px; 
    position:absolute; 
    top:0; 
    z-index:1; 

} 

HTML

<div class="nkhome"> 
     <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a> 
    </div> 
​ 

現場演示http://jsfiddle.net/t5FEX/7/

---

或本

<div class="nkhome"> 
     <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
      onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'" 
      /></a> 
    </div>​ 

現場演示http://jsfiddle.net/t5FEX/9/

Answer 3

它不會像這樣工作，把兩個圖像作爲背景圖片：

.bg-img { 
    background:url(images/yourImg.jpg) no-repeat 0 0; 
} 

.bg-img:hover { 
    background:url(images/yourImg-1.jpg) no-repeat 0 0; 
} 

Answer 4

您正在將圖像的背景設置爲其他圖像。這很好，但前景（IMG的SRC屬性）仍然覆蓋其他所有內容。

.nkhome{ 
    margin-left:260px; 
    top:170px; 
    position:absolute; 
} 
.nkhome a { 
    background:url(Images/btnhome.png); 
    display:block; /* Necessary, since A is not a block element */ 
    width:59px; 
    height:59px; 
} 
.nkhome a:hover { 
    background:url(Images/btnhomeh.png); 
} 


<div class="nkhome"> 
    <a href="Home.html"></a> 
</div> 

Answer 5

只要這個，沒有多餘的股利或JavaScript的需要，只是單純的CSS（jsfiddle demo）：

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover"> 
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!"> 
</a> 

CSS

.changesImgOnHover { 
    display: inline-block; /* or just block */ 
    width: 50px; 
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat; 
} 
.changesImgOnHover:hover img { 
    visibility: hidden; 
} 

Answer 6

這裏有一些容易遵循步驟和懸停教程，您可以「玩」並現場測試。

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

Answer 7

用這個做成類。並用自身的寬度和高度製作2個不同的圖像。適用於ie9。

看到這個鏈接。

http://kyleschaeffer.com/development/pure-css-image-hover/

您也可以2倍型動物的圖像製作和發生在自己的類名，在懸停的另一個圖像。

查看示例。

.myButtonLink { 
       margin-top: -5px; 

    display: block; 
    width: 45px; 
    height: 39px; 
    background: url('images/home1.png') bottom; 
    text-indent: -99999px; 
       margin-left:-17px; 

       margin-right:-17px; 

       margin-bottom: -5px; 

       border-radius: 3px; 
       -webkit-border-radius: 3px;   
} 

.myButtonLink:hover { 
    margin-top: -5px; 

    display: block; 
    width: 45px; 
    height: 39px; 
       background: url('images/home2.png') bottom; 
       text-indent: -99999px; 
       margin-left:-17px; 

       margin-right:-17px; 

       margin-bottom: -20x; 

       border-radius: 3px; 
       -webkit-border-radius: 3px; 
} 

Answer 8

精確解決您的問題

您可以通過使用內容上懸停改變圖像：網址（ 「YOUR-IMAGE-PATH」）;

對於你的CSS低於線圖像懸停使用：

img:hover 

，並使用在img下面的配置來改變懸停圖片：懸停：

img:hover{ 
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg"); 
}