img rollover影響同一div中的文本

Question

我有一個div，它包含一個img和一個位於它下面的標題。有一個超鏈接包裹整個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>是塊級元素。在a元素中放置div是不對的。更改您的代碼，如將div替換爲span並給予display: block;，然後嘗試。