제이쿼리 코드를 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클래스 가진얘들에게
이벤트 실행
!-->div.main-menu:hover .main-link {color:red}
main-link의 부모가 main-menu 일경우에 동작하겠죠~
답변을 작성하시기 전에 로그인 해주세요.