제이쿼리 코드를 CSS로 변경하고 싶습니다

제이쿼리 코드를 CSS로 변경하고 싶습니다

QA

제이쿼리 코드를 CSS로 변경하고 싶습니다

본문

아래처럼 해봤는데 잘 안되네요;;

div.main-menu:hover .main-link(color:red;)

 


$(function(){
 
$('div.main-menu').hover(function() {
  $('.main-link').css("color", "red");
}, function(){
  $('.main-link').css("color", "white");
});
 
$('div.comm-menu').hover(function() {
  $('.comm-link').css("color", "red");
}, function(){
  $('.comm-link').css("color", "white");
});
 
$('div.down-menu').hover(function() {
  $('.down-link').css("color", "red");
}, function(){
  $('.down-link').css("color", "white");
});
 
});

이 질문에 댓글 쓰기 :

답변 2



$(function(){
$('div.main-menu').hover(function() {
  $('.main-link',$(this)).css("color", "red");
}, function(){
  $('.main-link',$(this)).css("color", "white");
});
$('div.comm-menu').hover(function() {
  $('.comm-link',$(this)).css("color", "red");
}, function(){
  $('.comm-link',$(this)).css("color", "white");
});
$('div.down-menu').hover(function() {
  $('.down-link',$(this)).css("color", "red");
}, function(){
  $('.down-link',$(this)).css("color", "white");
});
});

 

아마 기존코드였으면 

div.main-menu 에 마우스오버했을때

main-link 클래스를 가진 모든 얘들이 작동했거나 소스가 엉켰을거같은 느낌이 드네요.

그래서 $(this)를 넣어 

div.main-menu에 마우스오버했을때

내가 마우스오버한 div.main-menu( 즉, $(this) ) 중에 main-link클래스 가진얘들에게

이벤트 실행

뭐 다 똑같이 red,white만 주실꺼라면 굳이 hover 대상에 각각의 클래스가 아닌 1개의 클래스를 주고 하면 되겟죠?
main-menu, comm-menu, down-menu
3개의 클래스에 navBtns 클래스를 추가해주고


$('.navBtns ').hover(function() {
  $('.comm-link',$(this)).css("color", "red");
}, function(){
  $('.comm-link',$(this)).css("color", "white");
});

div.main-menu:hover .main-link {color:red}

 

main-link의 부모가 main-menu 일경우에 동작하겠죠~

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT