첨부파일 https://eond.com/jquery/361757

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 코딩할 땐 구조적으로 잘 생각해서 코딩해야 합니다.

 

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 5 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
62 [ionic] Ionic Javascript examples 2015/09/03 0
61 [Banner] scrollon.js 흐르는 배너 2015/09/03 0
60 [고급활용] 마우스를 올리면 배경그림에 블러 효과 주기 2015/09/03 0
59 [고급활용] SCSS를 활용한 스크롤 배너 2015/09/03 0
58 [고급활용] 일정 영역만 보여주고 클릭하면 펼치기 2015/09/03 0
57 [고급활용] 마우스 따라 이미지 캡션 이동하기 2015/09/03 0
56 [property] [jquery] size()와 length [1] 2015/08/11 0
55 [슬라이더 플러그인] slidejs 2015/09/03 0
54 [기초활용] [jQuery] 부드럽게 '위로 가기' 만들기 2015/09/03 0
53 [슬라이더 플러그인] simplyScroll v2 2015/09/02 0
52 [추천사이트] 자바스크립트 파일 압축 및 복원하기 (***.min.js 파일 만들기) 2015/09/02 0
51 [질문] 풀지 못한 과제 3가지 2015/09/01 0
50 [플러그인] jQuery.html5form 파일 2015/08/31 0
49 [고급활용] [jQuery] Form, input 체크 validator, value 체크 2015/09/01 0
48 [플러그인] jQuery Validation Plugin 파일 2015/08/31 0
현재글 [기초활용] [jQuery] 태그로 구분해서 a 태그 효과 다르게 주기 2015/08/31 0
46 [플러그인] jquery chart 모음 2015/08/27 0
45 [기초활용] Javascript vs jQuery 2015/08/27 0
44 [플러그인] jQuery Cycle Plugin, 이미지 롤링 2015/08/27 0
43 [추천사이트] jQuery 활용 추천 사이트 2015/08/27 0

해시태그 디렉터리