下拉菜单只适用于铬

我不得不在一个下拉菜单中对电子商务网站中的某个元素进行破解，因为HTML结构导致无法使用CSS进行显示/隐藏。下拉菜单只适用于铬

我想出了这段代码，但它只适用于chrome。在IE & Firefox中，当光标离开蓝色并越过红色时，下拉菜单立即消失。这是为什么，我应该如何解决它？

$("#button").hover(
 
    function() { 
 
    $("#mainmenu").show(); 
 
    }, 
 
    function() { 
 
    if (!$("#mainmenu").is(":hover")) { 
 
     $("#mainmenu").hide(); 
 
    } 
 
    } 
 
); 
 

 
$("#mainmenu").hover(
 
    function() { 
 
    
 
    }, 
 
    function() { 
 
     $("#mainmenu").hide(); 
 

 
    } 
 
);

#button{ 
 
    width: 300px; 
 
    height: 30px; 
 
    background-color: blue; 
 
} 
 
#mainmenu{ 
 
    width: 300px; 
 
    height: 600px; 
 
    background-color: red; 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button"></div> 
 
<div id="mainmenu"></div>

来源

2017-07-06 Guerrilla

添加$("#mainmenu").show();的$("#mainmenu").hover()的第一个回调函数内：

$("#button").hover(
 
    function() { 
 
    $("#mainmenu").show(); 
 
    }, 
 
    function() { 
 
    if (!$("#mainmenu").is(":hover")) { 
 
     $("#mainmenu").hide(); 
 
    } 
 
    } 
 
); 
 

 
$("#mainmenu").hover(
 
    function() { 
 
    $("#mainmenu").show(); 
 
    }, 
 
    function() { 
 
    $("#mainmenu").hide(); 
 

 
    } 
 
);

#button { 
 
    width: 300px; 
 
    height: 30px; 
 
    background-color: blue; 
 
} 
 

 
#mainmenu { 
 
    width: 300px; 
 
    height: 600px; 
 
    background-color: red; 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button"></div> 
 
<div id="mainmenu"></div>

来源

2017-07-06 14:19:46 Ionut

完美的感谢。随着时间限制的允许，我会尽快表明。 – Guerrilla

不客气。乐于帮助。 – Ionut

我删除了此位从$("#button").hover()：

function() { 
    if (!$("#mainmenu").is(":hover")) { 
     $("#mainmenu").hide(); 
    }

这对我的作品在IE浏览器，你想要它：

$("#button").hover(
 
    function() { 
 
    $("#mainmenu").show(); 
 
    } 
 
); 
 

 
$("#mainmenu").hover(
 
    function() { 
 
    
 
    }, 
 
    function() { 
 
     $("#mainmenu").hide(); 
 

 
    } 
 
);

#button{ 
 
    width: 300px; 
 
    height: 30px; 
 
    background-color: blue; 
 
} 
 
#mainmenu{ 
 
    width: 300px; 
 
    height: 600px; 
 
    background-color: red; 
 
    position: absolute; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button"></div> 
 
<div id="mainmenu"></div>

来源

2017-07-06 14:20:02 Kevin

如果不进入红色，菜单会保持打开状态，鼠标熄灭时它需要关闭 – Guerrilla

啊我没有足够的测试; @ lonut的解决方案就是诀窍。 – Kevin

下拉菜单只适用于铬

回答

相关问题