1

おはようございます、

ユーザーがリンクにカーソルを合わせたときに、リンクの背景色を変更しようとしています。現在のコードでは、リンクの色は期待どおりに変更されますが、背景色は変更されません。疑似クラスを「SPAN」などの別のタグに付けると、すべてが正常に機能します。当然、「A」タグが原因だと思いますが、まったくわかりません。昨夜からこちらを凝視しております。マークアップ:

    <div id="thumbAboutWrap">
        <h4 class="contact">ADAM [AT] LAYEREDFEEDBACK [DOT] COM</h4>
        <a class="contact" href="#"><h4>FACEBOOK</h4></a>
        <a class="contact" href="#"><h4>LAST.FM</h4></a>
        <a class="contact" href="#"><h4>LINKEDIN</h4><a/>
    </div><!--thumbAboutWrap-->

CSS:

a.contact {
font-size:50px;
font-weight:800;
}

a.contact:hover {
background-color:#000;
color:#FFF;
}

それが違いを生む場合は、Meyerのリセットも使用しています。これまでのところ、問題はありません。

4

2 に答える 2

1

問題は、<h4>タグ内にある<a>タグにあります。<a>ではなく をスタイリングしています<h4>。

2 つのソリューション:

まず、<h4>タグを完全に削除します。これで問題は解決します。正直に言うと、これらの<h4>タグは実際には必要ありません (<a>とにかくフォント サイズを設定しています)。

または、マークアップをそのまま維持したい場合は、次h4のようにスタイル (特にホバー スタイル) に追加する必要があります。

a.contact:hover h4 {
  background-color:#000;
  color:#FFF;
}

それが役立つことを願っています。

[編集]

をホバーセレクターに追加することによる違いのデモは、h4ここで見ることができます: http://jsfiddle.net/C7UKp/

于 2011-10-12T13:51:22.267 に答える
0

try adding this to your css

a.contact {
font-size:50px;
font-weight:800;
display: block;
overflow: hidden;
margin-bottom: 5px;
}

http://jsfiddle.net/Xk7Jp/1/

于 2011-10-12T13:52:39.420 に答える