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>은 블록 수준 요소입니다. a 요소 안에 div을 넣는 것은 옳지 않습니다. div을 span으로 바꾸고 display: block;을주고 다음과 같이 코드를 변경하십시오.