这是我正在使用的菜单:spoilers.tumblr.com/tvschedule
在下面,您可以看到脚本。就单击功能而言,它可以正常工作,但是悬停有点棘手。为了显示某些类,我需要先隐藏其他类,但是我不希望它们在悬浮结束后再隐藏。我真的不知道如何正确解释这一点,但是如果您进入我的页面,您可以自己查看。

我希望有人能够在这里帮助我。 :)

附言悬停后,我还尝试将类添加回去,但这对我想做的事情不起作用。我也尝试在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; }

最佳答案

而不是悬停,请尝试同时定义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")
});


在有悬停的任何地方执行此操作。

10-05 20:55
查看更多