css - imgロールオーバーは同じdiv内のテキストに影響します

Question

imgとその下にあるタイトルを格納するdivがあります。このdiv全体をラップするハイパーリンクがあります。画像にカーソルを合わせたときに、テキストリンクのホバー状態を表示するにはどうすればよいですか？これまでのHTMLは次のとおりです。

<a href="#"><div id="box" class="image-hover">
<img src="images/image.jpg"></img><p class="title">Title goes here</p></div></a>

CSS:
.image-hover a {background-color: white;}
.image-hover a:hover {background-color: navy;}
.image-hover a:active {background-color: navy;}

Answer 1

ハイパーリンクは<a>インライン要素です。は<div>ブロック レベルの要素です。要素のdiv中に a を入れるのは正しくありません。aで置き換えdivてspan与えるdisplay: block;などのコードを変更してから試してください。