HTML
<a href="#"><img src="img/sub/profile_picture_s.png"></a>
<a href="#">바람돌이</a>
CSS
a:hover {border-bottom: 1px solid #999999;}
이런 식의 코드가 있을 때
이렇게 a태그 한게 img도 있고 텍스트도 있을 경우에 hover스타일을 텍스트에는 밑줄을 주고
이미지는 none하고 싶은데 각각 하고 싶으면 이미지랑 텍스트 선택하는 방법이 있나요? ㅜㅜ
위와 같이 a 태그 안에 img 태그와 텍스트가 있는 경우에 마우스를 올렸을 때 각각 img는 밑줄이 없고, 텍스트에는 밑줄을 주고 싶을 경우
a 태그 아래에 이미지와 텍스트를 구분하여 효과를 주는 제이쿼리입니다.
물론, 제이쿼리를 안 쓰고 a 태그 안에 있는 텍스트는 span 태그로 감싼 뒤 css에서 span 태그에 hover 효과를 주는 게 가장 깔끔합니다만;;
HTML
<a href="#"><img src="http://placehold.it/50x50"></a>
<a href="#">바람돌이</a>
<a href="#" id="aaa">Test</a>
<div><span>123</span>여기</div>
CSS
a, a:hover {text-decoration:none}
.underline {border-bottom: 1px solid #999999 !important;}
JS
$(function(){
var link = $("a");
if(link){
link.mouseover(function(){
$(this).addClass('underline');
});
link.mouseleave(function(){
$(this).removeClass('underline');
});
}
var img = $("a").children('img');
if(img){
img.parent().mouseover(function(){
$(this).removeClass('underline');
});
}
});
단순 a 태그를 가진 것을 link 라는 변수에 담고, 마우스를 올렸을 때 underline 속성을 주고, 마우스를 떼면 속성을 제거해줍니다.
a 태그 아래에 img 태그가 있을 경우 그 a 태그는 underline 속성은 제거하는 코드입니다.
마크업을 하다보면 이 외의 변수도 있을 수 있으므로 HTML 코딩할 땐 구조적으로 잘 생각해서 코딩해야 합니다.
