Jquery Can';t将光标移动到鼠标上方的子菜单
我创建了一个带有子菜单的菜单,我做的唯一一件事就是子菜单被放置在Jquery Can';t将光标移动到鼠标上方的子菜单,jquery,html,css,Jquery,Html,Css,我创建了一个带有子菜单的菜单,我做的唯一一件事就是子菜单被放置在UL之外(因为我没有选择),问题是我无法将光标移动到子菜单,我试图检查是否与菜单和子菜单断开连接,但没有任何线索 这是工作演示 CSS <style> .nav{ float: right; margin: 22px 0 0; padding: 0; } .nav ul{ float: right; margin: 0; padding: 0; font-size: 16px; } .nav ul li{ float:
UL
之外(因为我没有选择),问题是我无法将光标移动到子菜单,我试图检查是否与菜单和子菜单断开连接,但没有任何线索
这是工作演示
CSS
<style>
.nav{ float: right; margin: 22px 0 0; padding: 0; }
.nav ul{ float: right; margin: 0; padding: 0; font-size: 16px; }
.nav ul li{ float: left; margin: 0; padding: 0; /*position: relative;*/ display:block; padding:0 0 40px 0;}
.nav > ul > li > a{ color: #771521; padding:8px 15px 8px 15px; }
.nav ul li a:hover{text-decoration: underline;}
/*-----------Sub menu -----------*/
.submenu_willwid{position:absolute; width:100%; background:rgba(0,0,0,0.65); top:90px; padding:10px; box-sizing:border-box; display:none; z-index:101; min-height:195px; box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.68); left:0;}
.menu_inner{width:100%; max-width:1200px; margin:0 auto;}
.submenu_col_full{width:20%; float:left;}
.submenu_col_full > h4{font-size:14px; color:#fff; text-transform:uppercase; font-weight:400; text-align:center; padding:0 0 10px 0;}
.submenu_col_full > h4 > a{color:#fff; text-decoration:none;}
.submenu_willwid:after, .submenu_willwid:before {bottom: 100%; left: 51.5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.submenu_willwid:after {border-color: rgba(0, 0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.68); border-width: 12px; margin-left: -12px;}
.submenu_willwid2:after, .submenu_willwid2:before {bottom: 100%; left: 59%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.submenu_willwid2:after {border-color: rgba(0, 0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.68); border-width: 12px; margin-left: -12px;}
</sryle>
试试这个
$('#menu1,#submenu1').mouseover(function(){
$('#submenu1').fadeIn();
});
$('#menu1,#submenu1').mouseleave(function(){
$('#submenu1').fadeOut();
});
试试这个
$('#menu1,#submenu1').mouseover(function(){
$('#submenu1').fadeIn();
});
$('#menu1,#submenu1').mouseleave(function(){
$('#submenu1').fadeOut();
});
mouseenter和mouseleave事件的代码如下所述。此处
stop()
方法用于停止运行动画
//Menu 1
$('#menu1, #submenu1').mouseover(function(){
$('#submenu1').stop().fadeIn();
});
$('#menu1, #submenu1').mouseleave(function(){
$('#submenu1').stop().fadeOut();
});
//Menu 2
$('#menu2, #submenu2').mouseover(function(){
$('#submenu2').stop().fadeIn();
});
$('#menu2, #submenu2').mouseleave(function(){
$('#submenu2').stop().fadeOut();
});
检查jsfiddle您的mouseenter和mouseleave事件代码应如下所述。此处
stop()
方法用于停止运行动画
//Menu 1
$('#menu1, #submenu1').mouseover(function(){
$('#submenu1').stop().fadeIn();
});
$('#menu1, #submenu1').mouseleave(function(){
$('#submenu1').stop().fadeOut();
});
//Menu 2
$('#menu2, #submenu2').mouseover(function(){
$('#submenu2').stop().fadeIn();
});
$('#menu2, #submenu2').mouseleave(function(){
$('#submenu2').stop().fadeOut();
});
检查jsfiddle是否正在查找类似的内容?是的,类似的内容,但我没有在LI中移动html的选项是否有不更改html结构的选项?否,首先,创建菜单的子菜单不是一种有效的结构,其次,当您将鼠标移动到子菜单时,它将离开
li
区域,并实现第二个条件,您的子菜单将淡出fadeOut
。我想您是对的,我必须在li中移动子菜单元素,谢谢您的帮助!正在寻找类似的内容?是的,类似的内容,但我没有在LI中移动html的选项。有没有不更改html结构的选项?没有,首先,创建菜单的子菜单不是一种有效的结构,其次,当您将鼠标移动到子菜单时,它将离开li
区域,并实现第二个条件,您的子菜单将淡出fadeOut
。我想您是对的,我必须在li中移动子菜单元素,谢谢您的帮助!