用户放置鼠标悬停链接时图像更改[关闭]答案

【问题标题】：image change when user places mouse hover link [closed]用户放置鼠标悬停链接时图像更改[关闭]
【发布时间】：2013-12-10 00:24:19
【问题描述】：

我在这样的链接中有一张图片：

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

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

【问题讨论】：

“你知道哪种方法更简单吗？” 有哪些选项？你试过什么？

标签： html css

【解决方案1】：

纯 HTML

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

【讨论】：

看起来不错，但是当我将鼠标悬停在链接上时，我希望它再次成为以前的图像。我还需要添加什么吗？
更新：您只需要添加一个onmouseout 事件
好的，我试过了，看起来很完美...
如果您有空闲时间，请回答最后一个问题。您如何将上述答案应用于此 php 链接： echo" " ;
其实，锚标签并不重要，你要做的就是在img标签中添加onmouseover和onmouseout属性。

【解决方案2】：

You have already asked this。请不要问两次，而是根据需要编辑您的第一个问题。

仅使用 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】：

你可以这样做：

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

样式：

.main-img{
    z-index; // This might not be required
}

.caption-img{
    z-index:10;
    display:none;
}

.swith-image:hover > .caption-img{
    display:inline-block; // either this or block
}

.swith-image:hover > .main-img{
    display:none;
}

这应该会切换图像。只要你玩弄它，我认为你应该可以通过更改两者的显示属性或仅通过更改 z-index 来做到这一点。

【讨论】：