ToggleMenu 클래스 제거 및 추가

Question

사용중인 메뉴 : spoilers.tumblr.com/tvschedule 아래에서 스크립트를 볼 수 있습니다. 클릭 기능과 관련하여 문제가 없지만 호버링은 다소 까다 롭습니다. 일부 수업을 표시하려면 먼저 다른 사용자를 숨겨야하지만 허버트가 끝나면 더 이상 숨기지 않아야합니다. 나는 이것을 올바르게 설명하는 방법을 정말로 모른다. 그러나 내 페이지에 있다면, 너 자신을 위해 그것을 볼 수있다.

누군가 나를 도와 줄 수 있기를 바랍니다. :)

P.S. 나는 또한 유혹 후에 클래스를 다시 추가하려고 시도하지만, 내가하려고하는 것에 대해서는 효과가 없다. 나는 또한 CSS에서 z-index로 작업을 시도했지만 그 중 하나는 작동하지 않는다.

<script type="text/javascript"> 
$(document).ready(function(){ 



$("#all").hover(function() { 
$('.morenav').removeClass('hoverednow hoveredhiatus hoveredto hoveredfinished clickedfinished clickedto clickedhiatus clickednow'); 
$(this).closest(".morenav").toggleClass("hoveredhall")} 



); 

$("#now").hover(function() { 
$('.morenav').removeClass('hoveredall hoveredhiatus hoveredto hoveredfinished clickedfinished clickedto clickedhiatus'); 
$(this).closest(".morenav").toggleClass("hoverednow") 
} 


); 

$("#hiatus").hover(function() { 
$('.morenav').removeClass('hoveredall hoverednow hoveredto hoveredfinished clickedfinished clickedto'); 
$(this).closest(".morenav").toggleClass("hoveredhiatus") 
}); 

$("#to").hover(function() { 
    $('.morenav').removeClass('hoveredall hoveredhiatus hoverednow hoveredfinished clickedfinished'); 

$(this).closest(".morenav").toggleClass("hoveredto") 
}); 

$("#finished").hover(function() { 
$('.morenav').removeClass('hoveredall hoverednow hoveredto hoveredhiatus'); 
$(this).closest(".morenav").toggleClass("hoveredfinished") 
}); 

$("#all").click(function() { 
$('.morenav').removeClass('clickednow clickedhiatus clickedto clickedfinished'); 

$(this).closest(".morenav").toggledClass("clickedall") 
}); 

$("#now").click(function() { 
$('.morenav').removeClass('clickedhiatus clickedall clickedto clickedfinished'); 
$(this).closest(".morenav").toggleClass("clickednow") 
}); 

$("#hiatus").click(function() { 
    $('.morenav').removeClass('clickednow clickedall clickedto clickedfinished'); 

$(this).closest(".morenav").toggleClass("clickedhiatus") 
}); 

$("#to").click(function() { 
$('.morenav').removeClass('clickednow clickedall clickedhiatus clickedfinished'); 
$(this).closest(".morenav").toggleClass("clickedto") 
}); 

$("#finished").click(function() { 
$('.morenav').removeClass('clickednow clickedall clickedhiatus clickedto'); 
$(this).closest(".morenav").toggleClass("clickedfinished") 
}); 


});</script> 

CSS

.morenav.hoveredall {background:#f0f0f0; position:fixed; z-index:9999999; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 

.morenav.clickedall {background:#f0f0f0; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 


.morenav.hoverednow {background:#6E0420; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 

.morenav.clickednow {background:#6E0420; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 
.morenav.hoveredhiatus {background:teal; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 
.morenav.clickedhiatus {background:teal; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 
.morenav.hoveredto {background:#CFBE27 ; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 
.morenav.clickedto {background:#CFBE27 ; -moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s;} 
.morenav.hoveredfinished {background:#FA6900 ;-moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s; } 
.morenav.clickedfinished {background:#FA6900 ;-moz-transition-duration:1s; 

-webkit-transition-duration:1s; 

-o-transition-duration:1s; } 

Answer 1

대신 호버링의, 모두 handlerIn 및 handlerOut 함수를 정의하려고합니다. 자세한 내용은 여기를 참조하십시오. http://api.jquery.com/hover/ 위 코드의 문제점은 마우스가 마우스 위로 움직일 때만 확인한다는 것입니다. 클래스를 제거하지만 마우스가 사라지면 다시 클래스를 추가 할 필요가 없습니다.

그래서 코드는 다음과 같이 시작한다 :

$("#finished").hover(function() { 
$('.morenav').removeClass('hoveredall hoverednow hoveredto hoveredhiatus'); 
$(this).closest(".morenav").toggleClass("hoveredfinished") 
}, function() { 
$('.morenav').addClass('hoveredall hoverednow hoveredto hoveredhiatus'); 
$(this).closest(".morenav").toggleClass("hoveredfinished") 
}); 

은 호버이 사방이 좋아하세요.