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

在任何地方都有这样的悬停。

ToggleMenu删除和添加类

1 个答案: