Question

我在这样的链接中有一个图像：

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

我想要的是当用户放置鼠标悬停链接时要将图像更改为“post_light.png”。有什么想法更简单吗？

Answer 1

纯HTML

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

Answer 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和屏幕阅读器并发症。

Answer 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来做到这一点。

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

3 个答案: