操作鏈接鼠標懸停？

我使用的是cshtml/C＃，我需要鏈接以及鼠標懸停效果的圖像。我似乎無法找到適用於兩者的東西。操作鏈接鼠標懸停？

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Tokyoship_Home_icon.svg/300px-Tokyoship_Home_icon.svg.png" class='img-responsive' onclick="location.href='@Url.Action("Index", "ModelDirectory")'; return false;"/>

有沒有解決方案呢？所以懸停時，圖片將是http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png，並在鼠標移出恢復正常。我有很多圖像鏈接，寧願避免爲每個圖像的鼠標懸停jQuery功能。我不知道爲什麼onmouseover="changeImage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png')"不起作用。提前致謝。

來源

2013-11-25 triplethreat77

我已經發布了一個同時包含javaScript和jQuery的解決方案。你可以處理你喜歡的圖像。你可以檢查... –

其實，這完美的作品。考慮到我有很多不同的圖像，我只是給他們新的類，並通過CSS調整懸停。 Change image on hover

<div class="effect"> 
<img class="image" src="image.jpg" /> 
<img class="image hover" src="image-hover.jpg" /> 
</div> 



div.effect img.image{ 
/*type your css here which you want to use for both*/ 
} 
div:hover.effect img.image{ 
display:none; 
} 
div.effect img.hover{ 
display:none; 
} 
div:hover.effect img.hover{ 
display:block; 
}

來源

2013-11-25 18:47:16 triplethreat77

我認爲這是過度複雜的事情。您可以只有一個DIV並在懸停時更改其圖像背景 - 請檢查我的答案 –

您不需要使用JavaScript。而不是IMG宣佈這樣的DIV：

<div class='img-responsive' onclick="location.href='@Url.Action("Index", "ModelDirectory")'; return false;"> 
</div>

並將您的圖像用作CSS類中的背景圖像。對於普通視圖：

div.img-responsive { 
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Tokyoship_Home_icon.svg/300px-Tokyoship_Home_icon.svg.png'); 
    width:100px; 
    height:100px; 
    background-size:contain; 
}

而且鼠標懸停觀點：

div.img-responsive:hover { 
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png'); 
    background-size:contain; 
}

演示：http://jsfiddle.net/c3YXN/隨意在一等調整DIV大小

來源

2013-11-25 18:42:28

操作鏈接鼠標懸停？

回答

相關問題