Html 用户放置鼠标悬停链接时图像更改

我在链接中有一个图像，如下所示：

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

<a class="switch-image" href="start_post_job.php"> 
    <img class="main-img" src="img/post.png">
    <img class="caption-img" src="img/post-light.png">
</a>

---

我只想在用户放置鼠标悬停链接时将图像更改为“post_light.png”。你知道哪种方法更简单吗？

纯HTML

<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">

。请不要问两次，如果需要，请编辑第一个问题

由于只有HTML和CSS，因此无法更改图像的来源。如果将

IMG

标记更改为

DIV

标记，则可以更改设置为背景的图像

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

---

请注意可能由此产生的SEO和屏幕阅读器复杂性。

您可以这样做：

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

<a class="switch-image" href="start_post_job.php"> 
    <img class="main-img" src="img/post.png">
    <img class="caption-img" src="img/post-light.png">
</a>

---

这将切换图像。只要你玩转它，我认为你应该可以通过改变两个的显示属性或改变z索引来实现这一点。

“知道哪种方法更容易实现吗？”在哪些选项中？你们尝试过什么？看起来很棒，但当我把鼠标移到链接上时，我希望它能再次变成以前的样子。我还需要添加什么吗？更新：您只需要添加一个

onmouseout

eventok我已经尝试过了，它看起来很完美…关于最后一个问题，如果您有空闲时间，请。您如何将上述答案应用于此php链接：echo“”；事实上，它周围的锚定标记并不重要，您所要做的就是向img标记添加

onmouseover

和

onmouseout

属性。