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，鼠标输出恢复正常。我有很多图像链接，宁愿避免鼠标悬停的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类中的背景图像。对于普通视图：

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大小

Answer 2

实际上，这非常有效。考虑到我有许多不同的图像，我只是给它们新的类并通过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;
}

动作链接鼠标悬停？

2 个答案: