悬停链接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";
}

但是图像没有改变,它被忽略了,(我测试了背景颜色它的工作原理(然后问题不在url或...))

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

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

注意:我用photoshop生成了这个页面

你有什么主意吗

Answer 1

您可以完全删除,img因为您通过标签上的CSSa添加效果.

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