css - 悬停链接 css 时更改图像链接

Question

我有这个链接:

<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";
}

但是图像没有改变，它被忽略了，(我测试了 background-color 它的工作原理(然后问题不在 url 或 ...))

当我像那样使用没有悬停的背景图像时:它没有出现:

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

注意:我用 photoshop 生成了页面

你有什么想法吗

Answer 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