这是我正在使用的菜单: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")
});
在有悬停的任何地方执行此操作。