下拉列表仅适用于Chrome

Question

我不得不在一个电子商务网站中的元素的下拉菜单中进行操作，因为html结构，显示/隐藏无法使用css。

我想出了这个代码，但它只适用于chrome。在IE＆amp;当光标离开蓝色并越过红色时，Firefox下拉消息立即消失。为什么会这样，我该如何解决？

＆＃13;

＆＃13;

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

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

  }
);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在$("#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>

Answer 2

我从$("#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>