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

ango

2019-03-22 (금) 13:21:23 4,392

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

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

Copy

$(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");
});

 

});

css 제이쿼리

답변 2개 / 댓글 4개

채택된 답변

+20 포인트

아르키어드

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-03-22 (금) 14:06:02

Copy

$(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클래스 가진얘들에게

이벤트 실행

답변에 대한 댓글 3개

ango

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-03-22 (금) 14:12:53

답변 감사합니다. 코드를 단순하게 하려면 어떻게 하나요?
함수로 짜야하나..

아르키어드

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-03-22 (금) 15:06:35

뭐 다 똑같이 red,white만 주실꺼라면 굳이 hover 대상에 각각의 클래스가 아닌 1개의 클래스를 주고 하면 되겟죠?
main-menu, comm-menu, down-menu
3개의 클래스에 navBtns 클래스를 추가해주고
[code]
$('.navBtns ').hover(function() {
$('.comm-link',$(this)).css("color", "red");
}, function(){
$('.comm-link',$(this)).css("color", "white");
});
[/code]