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

【问题标题】：image refers to a link change when user place mouse arrow over image图像是指用户将鼠标箭头放在图像上时的链接更改
【发布时间】：2013-12-19 20:47:31
【问题描述】：

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

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

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

你知道什么是最好的方法吗？

【问题讨论】：

标签： html

【解决方案1】：

您可以使用 Css 悬停类。将你的 src 属性设置为 start_light.png

【讨论】：

【解决方案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 和屏幕阅读器并发症。

【讨论】：

【解决方案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');
}

【讨论】：