aで囲った部分をマウスオ-バ-で背景色を変えたい

質問

HTML5だとaタグで要素全体を囲えるとのことなので、
お知らせ部分に下記のようなソースをHTML5を使って作成しました。

<dl>
<a href="#">
<dt>日付</dt>
<dd>テキストテキスト</dd>
</a>
</dl>

これに対して、

dl a:hover {
background: #FF9900;
}

とCSSで設定すれば、aタグで囲っている部分が
マウスオーバーすれば背景色がオレンジになると思ったのですが、
何をどうやってもマウスオーバーしても背景色が変わってくれません。

そもそも自分の理解不足で根本的に無理なのでしょうか？
お分かりになる方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

＞HTML5だとaタグで要素全体を囲えるとのことなので、
　つまみ喰いはダメです。括れますが・・・<dl>要素には<dt><dd>要素以外は含むことが出来ません。
<dl>
　<dt><a href="">日付</a><dt>
　<dd><a href="">メッセージ</a></dd>
　<dt><a href="">日付</a><dt>
　<dd><a href="">メッセージ</a>/dd>
　<dt><a href="">日付</a><dt>
　<dd>メッセージ</dd>
</dl>
と書かなければなりません。

無難なのは
<ul>
　<li>
　　<dl>
　　　<dt><a href="">日付</a></dt>
　　　<dd><a href="">記事</a></dd>
　　</dl>
　</li>
　<li>
　　<dl>
　　　<dt><a href="">日付</a></dt>
　　　<dd><a href="">記事</a></dd>
　　</dl>
　</li>
にてli:hover{}でしょうね。

お礼

ご回答ありがとうございました。
その回答をもとにして思うような形にもっていくことができました。
仰るとおり、つまみぐいはだめですね。
きちんと基本を学ばないと…

回答No.2

DrFell

aはインライン要素なのでブロックレベル要素であるdlやdt、ddを子要素に持つことができません。（html4までｈｔｍ5はブロックレベル・インラインが無くなります）

マウスオーバーだけなら、a要素で囲む必要は古ーい間違ったブラウザを意識しなければ必要ありません。

<dl>
<dt>日付</dt>
<dd>テキストテキスト</dd>
</dl>

にたいして、１行ずつなら
dl *:hover{background:#FF9900;}

全体になら
dl:hover{background:#FF9900;}
とすれば、OKです

お礼

ご回答ありがとうございました。
残念ながら自分が思うような状態には持って行けませんでしたが、
参考になりました。
重ね重ねありがとうございました。

回答No.1

Ogre7077

dl 要素の中は、dt/dd 要素しか使えません。なので不正な a 要素が自動的に排除されたようです。
そもそも a 要素はインライン型なので、要件を満たせません。

ブロックへの背景色ならば、以下の様に組んではいかがでしょか。
インライン要素の下にブロック要素を置き、ブロック要素に対してスタイルを指定しています。

<style>
a:hover section { background: #FF9900; }
</style>

<a href="#"><section>
<h6>日付</h6>
<p>てきすと
</section></a>

お礼

ご回答ありがとうございました。
残念ながら自分が思うような状態には持って行けませんでしたが、
参考になりました。
重ね重ねありがとうございました。