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，因为您通过a标记上的 CSS 添加了效果。

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

Answer 2

我对你的问题有点困惑，但听起来你需要放入两个不同的图像。因此，鼠标悬停时会有一个图像，而另一个图像则没有。您只需在悬停时为background-url添加不同的路径。此外，您应该在img标签中放入一个木板gif，以便向后兼容。

您还应该使用自闭标签/＆gt;为你的形象。标签以您发布的方式打开。

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

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

2 个答案: