0

親要素の :hover を変更すると、各子要素に変換が適用されると思われるでしょう。でも、

<a href="" class="pressRelease"><div class="pressRelease">
    <div class="timestamp">
        <p class="timestamp">02 Feb 2012</p>
    </div>
    <div class="pressReleaseTitle">
        <p class="pressReleasetitle">release title</p>
    </div>
</div></a>

div.pressRelease :hover {
    background-color:#F2F2F2
}

div.timestamp {
    float:left;
    width: 110px;
    padding-top:10px;
    padding-bottom:21px;
}

div.pressReleaseTitle {
    float:right;
    width:498px;
    padding-top:23px;
    padding-bottom:21px;
    padding-left:25px;
}

a.pressRelease {
    text-decoration:none;
    color:#767676;
    display:block;
    background-color:#063
}

HTML および CSS ファイルにこのコードが含まれていますが、動作はかなり奇妙です。タイムスタンプにカーソルを合わせると、タイムスタンプの背景色のみが変更され、プレス リリースのタイトルの色は変更されません。明らかに、プレスリリース全体を強調したい

これを修正する方法についてのアイデアはありますか?

前もって感謝します

4

3 に答える 3

3

エラー：

交換：

div.pressRelease :hover

と：

div.pressRelease:hover

の前にスペースを入れてはなりません:hover。

提案:

  1. HTML の記述方法が無効です。インライン要素<a>にブロック要素を含めることはできません<div>。

  2. ブラウザは周囲の<a>タグを無視します。したがって、次のようなコードを指定すると:

     <a><div><p></p></div></a>

    としてレンダリングされます

     <a></a><div><p></p></div>
于 2013-01-17T07:40:43.117 に答える
1

float:left子要素を「float」でラップしていないため、親 div に渡してみてください

Praveenが言及したエラー修正に加えて

div.pressRelease {
    float: left;
}
于 2013-01-17T07:58:25.157 に答える
1

タグに追加oveflow:autoしてa、内側の要素をラップします。

からdivを削除しますdiv.pressRelease:hover

.pressRelease:hover {
    background-color:#F2F2F2
}

div.timestamp {
    float:left;
    width: 110px;
    padding-top:10px;
    padding-bottom:21px;
}

div.pressReleaseTitle {
    float:right;
    width:498px;
    padding-top:23px;
    padding-bottom:21px;
    padding-left:25px;
}

a.pressRelease {
    text-decoration:none;
    color:#767676;
    display:block;
    background-color:#063; overflow:auto
}

デモ

于 2013-01-17T07:42:29.503 に答える