c# - Action 链接鼠标悬停？

Question

我正在使用 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并在 mouseout 上恢复正常。我有很多图像链接，宁愿避免为每个图像使用鼠标悬停的 jquery 函数。我不确定为什么 onmouseover="changeImage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Home_Icon.svg/512px-Home_Icon.svg.png')" 将不起作用。提前致谢。

Answer 1

您不需要 JavaScript。而不是 IMG 像这样声明一个 DIV:

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

并将您的图像用作 CSS 类中的背景图像。对于普通 View :

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;
}

鼠标悬停 View :

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/随意调整 1st 类中的 DIV 大小