悬停链接css时更改图像链接答案

【问题标题】：change image link when hover the link css悬停链接css时更改图像链接
【发布时间】：2013-02-09 18:01:53
【问题描述】：

我有这个链接：

<a href = "" ><img src="images_cartographie/cartographie3_05.gif" width="207" height="47" alt=""></a></td>

当用户通过我测试的链接时，我想更改图像：

#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}

但是图像没有改变，它被忽略了，（我测试了它的背景颜色（然后问题不在 url 或 ...））

当我使用背景图像而不像这样悬停时：它没有出现：

#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}

注意：我用 Photoshop 生成了页面

你有什么想法

【问题讨论】：

在#planification:{background-image:} 和#planification:hover:{background-image:} 上使用背景图片
从img中删除src....
How to make image hover in css?.

标签： css image hyperlink

【解决方案1】：

您可以完全删除img，因为您通过CSS 在a 标签上添加了效果。

HTML

<a href="" class="image_link"></a>

CSS

.image_link{
    display:block;
    width:800px;
    height:600px;
    background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}

.image_link:hover {
    display:block;
    width:800px;
    height:600px;
    background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}

JSFiddle.

请注意，您必须将dispay:block/inline-block 添加到a

【讨论】：

【解决方案2】：

我对您的问题有些困惑，但听起来您需要放入两张不同的图片。因此，当您将鼠标悬停时会显示一个图像，而当您没有悬停时会显示另一个图像。您只需在悬停时为 background-url 输入不同的路径。此外，你应该在你的 img 标签中放一个木板 gif 以实现向后兼容性。

你还应该为你的图片使用一个自闭标签 />。标签以您发布的方式打开。

#planification
{
    background: url(images_cartographie/cartographie3_03.gif) 
}

#planification:hover
{
    background: url(images_cartographie/new_image_goes_here.gif) 
}

<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>

【讨论】：