박스에 마우스 오버시 안의 텍스트의 색깔도 변하게 하는 것

<style>

#garam { position:relative;}

#garam .img_set{width:200px; height:150px; background:#fafafa;}

#garam .topic{width:100px; height:100px;}

#garam .topic .sub_title{color:#242424;height:30px;overflow:hidden;font-size:1.2em;}

#garam .topic .sub_content{color:#666464;height:70px;overflow:hidden;padding:3px 0 0;} 

#garam ul {list-style:none;clear:both;}

#garam li{float:left;list-style:none;text-decoration:none;}

.topic  a:link, a:visited {color:#242424;text-decoration:none}

.topic  a:hover, a:focus, a:active {color:#FE4F90;text-decoration:none;}

</style>

<div id="garam">

<ul>

<li>

<div class="topic">

<div class="sub_title"><a href="#">제목</a></div>

<div class="sub_content">내용</div>

</div>

<div class="img_set">

<a href="#">

</a>

</div>

</li>

</ul>

</div>

<div style="clear:both;"></div>

지금 상태로는 마우스가 sub_title내의 제목글씨위에 올라가야 글씨 색이 변하는 것인데

sub_title과 sub_content를 감싸고 있는 topic 에 마우스가 올라가면 배경색과 더불어 안의 제목과 내용의 글씨도 변하게 만들고 싶습니다. 그리고 지금처럼 제목 글씨를 클릭해야 링크 되는게 아니라 topic 박스 자체가 링크가 되었으면 합니다.

이제 막 공부를 시작하다보니 쉬운듯 어렵네요.

하나하나 변하게 하는건 가능한데.. 도저히 풀리지 않아서 도움 말씀 요청드려봅니다.