变化图像链接时，将鼠标悬停在链接的CSS

我有此链接：变化图像链接时，将鼠标悬停在链接的CSS

<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或...））

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

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

注意：我生成的页面用photoshop

你有什么想法

来源

2013-02-24 simonTifo

使用背景图像：{背景图像：}'和'#planification：悬停：{背景图像：}' – 2013-02-24 14:26:28

我编辑后 – simonTifo 2013-02-24 14:29:32

除去'src'从'IMG '.... – 2013-02-24 14:32:29

您可以完全去除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

来源

2013-02-24 14:38:41 Vucko

谢谢你，它的作品 – simonTifo 2013-02-24 15:02:42

JSFiddle +1 – 2013-11-28 17:37:24

我有点困惑你的问题，但它听起来像是你需要把两个不同的图像。所以，当你滑过时有一个图像，当你没有时有另一个图像。悬停后，您只需为背景网址放置不同的路径。此外，你应该在你的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>

两个`#planification

来源

2013-02-24 14:49:52 Ben

变化图像链接时，将鼠标悬停在链接的CSS

回答

相关问题