0

私はこのリンクを持っています：

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

NB : 私はフォトショップでページを生成しました

何か考えはありますか

4

2 に答える 2

6

タグにCSSimg経由でエフェクトを追加するため、 を完全に削除できます。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-24T14:38:41.603 に答える
0

私はあなたの質問について少し混乱していますが、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>
于 2013-02-24T14:49:52.510 に答える