박스에 마우스 오버시 안의 텍스트의 색깔도 변하게 하는 것
본문
<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 박스 자체가 링크가 되었으면 합니다.
이제 막 공부를 시작하다보니 쉬운듯 어렵네요.
하나하나 변하게 하는건 가능한데.. 도저히 풀리지 않아서 도움 말씀 요청드려봅니다.
답변 1
<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;}
///추가///
#garam .topic:hover .sub_title{ topic에 마우스 오버시 sub_title이 바뀔 css }
#garam .topic:hover .sub_content{ topic에 마우스 오버시 sub_content이 바뀔 css }
</style>
<div id="garam">
<ul>
<li>
<a href="#">
<div class="topic">
<div class="sub_title">제목</div>
<div class="sub_content">내용</div>
</div>
</a>
<div class="img_set">
<a href="#">
</a>
</div>
</li>
</ul>
</div>
<div style="clear:both;"></div>
감사합니다.
정말 신기하게 한방에 해결되네요..
어제는 이틀동안 고민하던걸 해결해 주시더니.. 오늘은 그 다음 문제도 순식간에 해결해주시네요.
덕분에 하루에 하나씩 배웠습니다. 잊지않고 계속 공부해보겠습니다. 감사드립니다.
