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

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

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

제이쿼리 코드를 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");
});

bonobono님의 답변

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

 

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

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 23
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT