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

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

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

これに対して、

dl a:hover {
background: #FF9900;
}

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

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

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/05/28 09:09

＞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{}でしょうね。

この回答へのお礼

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

お礼日時：2013/05/30 21:56

No.2 回答者： DrFell 回答日時： 2013/05/28 04:25

aはインライン要素なのでブロックレベル要素であるdlやdt、ddを子要素に持つことができません。

（html4までｈｔｍ5はブロックレベル・インラインが無くなります）

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

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

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

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

この回答へのお礼

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

お礼日時：2013/05/30 21:57

No.1 回答者： Ogre7077 回答日時： 2013/05/27 22:28

dl 要素の中は、dt/dd 要素しか使えません。

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

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

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

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

この回答へのお礼

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

お礼日時：2013/05/30 21:58