1

html5 Webページで、ホバー効果があります。このような：

a:hover {
   background: #EFEFEF;
}

リンク付きの画像のリストもあります。

<a href="x">
    <img src="images/y.png" />
</a>

これらのリンクにカーソルを合わせると、画像の下に#EFEFEF色の線が表示されます。どうすれば削除できますか？

これはテキスト装飾ではありません。下線を付けたり、パディングをいじったりしても機能しませんでした。

4

5 に答える 5

3

画像の下にアンカーの背景が表示されている可能性があります。画像の表示をブロックに設定します。

a img {
  display: block;
}

デモの前後：http：//jsbin.com/enikoz/edit#preview

ただし、インライン画像をブロック要素に変換すると、レイアウトに影響を与える可能性があることに注意してください。

于 2012-04-26T13:57:34.187 に答える
1

ジョナサンの答えの拡張として、要素のレイアウトを変更したくない場合は、をに変更するだけでなく、を作成するaことをお勧めします。inline-blockimgblock

a {display:inline-block}
a img {display:block}

そうaすれば、はインラインのままになり、テキストはその整合性を維持します。jsFiddleを参照してください。

于 2012-04-26T14:51:42.400 に答える
0

画像の下の空白に背景色が表示されています。画像の後の空白を削除すると、空白が消えるはずです。

<a href="x">
    <img src="images/y.png" /></a>
于 2012-04-26T14:04:54.090 に答える
0

画像リンクが共通のディレクトリまたはWebサイトを指している場合は、正規表現のトリックで属性セレクターを使用して実際にそれらを選択できます。

a[href*="foo"]:hover {
   background:transparent;
}

したがって、基本的に、これにより、href属性に「foo」が含まれるすべての要素が選択されます。等号の前のアスタリスクはワイルドカードとして機能します。それ以外の場合は、正確に「foo」hrefを持つ要素のみを選択します。

于 2012-04-26T15:22:17.360 に答える
0

私の推測では、あなたが見ている線は、背景色で塗りつぶされている画像の下のディセンダースペース（テキストベースライン上にあります）です。text-align: bottom画像自体に適用してみて、線が消えるか、画像の上部に移動するかどうかを確認します。そうでない場合は、試してくださいtext-bottom。

0.15emこれらのいずれかが機能する場合は、垂直方向の配置が問題です。画像にページカラーの背景を追加し、テキスト行の下部に配置しながら、下にパディング（たとえば）を付けることで修正できます。 （bottomまたはtext-bottom以前と同じように）。

于 2012-04-26T15:56:21.497 に答える