图像是指用户将鼠标箭头放在图像上时的链接更改

Question

我有2张图片start.png和start_light.png 我在html中的图像是指这样的链接：

  <a href="start.php"> <img src="img/start.png"/> </a>

我想要的是当用户将鼠标箭头放在图像start.png上方时，将“start.png”图像更改为“start_light.png”

任何想法是最好的方法吗？

Answer 1

你可以使用Css悬停类。设置src属性以更改为start_light.png

Answer 2

仅使用HTML和CSS，无法更改图像源。如果您将IMG标记更改为DIV标记，则可以更改设置为背景的图像。

div {
    background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
    background: url('http://www.placehold.it/100x100/000001');
}

请注意可能由此产生的SEO和屏幕阅读器并发症。

Answer 3

尝试在Google上搜索如何将:hover与CSS结合使用。

<强> HTML

<a href="start.php"> <img src="img/start.png"/> </a>

<强> CSS

img {
    background:red;
    width:60px;
    height:60px    
}
img:hover{
    background:blue;
}

您还可以查看此fiddle作为示例。

修改

如果您想要更改图像本身，可能需要将其作为CSS包含

img:hover {
    background:url('img/start_light.png');
}