2012-02-20 8 views
2

リンクされた画像の上にマウスを置くと、画像の下にホバリング背景色が表示されます。これを避ける方法は?a:img insideのホバー背景

a要素(a.nobackground:hoverなど)に特別なクラスを適用する必要がないソリューションはありますか?

CSS:

a:hover, a:focus { 
    background-color: rgb(240,39,96); 
    cursor: pointer;  
} 

HTML:

<a href="#" title=""><img src="with_transparency.png" alt=""/></a> 

編集: 他の色にIMGの背景を設定

a img { 
    background: none !important; 
} 

動作しないnoneにIMGの背景を設定します非固体cがない場合、仕事をするだろう画像(この場合は.png)の下のolor(またはグラフィック)

a img { 
    background: #000 !important; 
} 

答えて

2

画像の背景色を設定してもよろしいですか?

a img { 
    background: none; 
} 

あなたのスタイルシートによっては、他の条件を上書きするために、「なし」の前で!important強打が必要になる場合があります。

編集:2番目の考えでは、単純に「none」というのではなく、明示的に色の値を設定することができます。

もう1つの編集:透明なPNGの背後の色や背景が単色でない場合は、いくつかの問題が発生します。 、だからここ

.transparent_png { 
    background-image: url('with_transparency.png'); 
    background-color: transparent; 
    display: inline-block; 
    width: ??px; 
    height: ??px; 
} 

あなたが実際にイメージタグを使用していないが、通常に適用されるの背景色のプロパティを上書きすることができます。

<a href="#" class="transparent_png"></a> 

とCSS:一つの選択肢はこれです:ホバーとアクティブ:アクティブ。これは機能しますか?

+1

しかし、ディスプレイを追加することを覚えておく必要があります:ブロックを.transparent_pngにして、それに高さと幅を与えます。 – Memke

+0

ああ、ありがとう。 "ブロック"表示がデザインで問題になる場合、Memke、あなたはインラインブロックを試みることができます。 – Matt

0

私が質問を正しく理解していれば、その特定のリンクに特別なクラスを適用するか、他のリンクと異なる場合はリンクをその場所で呼び出す必要があります。例:

div div div a {} 

Mattさんは、重要なのは、ページ内のすべてのリンクを含むルールがあるためです。私は別のクラスを推薦するでしょう、それは意味論の観点からは良いでしょう。

関連する問題