Javascript Jquery show/hide div 更好的解决方案

Question

我这里有两个按钮，当我悬停其中一个按钮时，它会显示一个包含信息的 div(从左到右)。如果光标既不在按钮上也不在 div 上，它将隐藏。 这是我的代码，它对我有用，但我想知道比我的更好的解决方案。 :D 谢谢!

HTML:

<button id="Btn_Nav_Equipment" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)" ><span></span></button>
<button id="Btn_Nav_Report" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)"><span></span></button> 

<div id='Panel_Equipment' style="display:none;" onmouseover="Set_Panel_Nav()"onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
<div id='Panel_Report' style="display:none;" onmouseover="Set_Panel_Nav()" onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>

Javascript:

var Btn_Nav=false;
var Panel_Nav=false;

function Nav_Over(id){
  var str=id.split('_');
  var Panel_id='Panel_'+str[2];
  $('#'+Panel_id).animate({width:'show'},300);
}

function Nav_Out(id){
  var str=id.split('_');
  var Panel_id='Panel_'+str[2];   
  if(( Btn_Nav==false)&&(Panel_Nav==false)){
    $('#'+Panel_id).animate({width:'hide'},300);
  }
}
function Nav_Panel_Out(id){
  $('#'+id).animate({width:'hide'},300);
}


function Set_Btn_Nav(){
  Btn_Nav=true;
}

function Set_Panel_Nav(){
Panel_Nav=true;
}

function Leave_Btn_Nav(){
Btn_Nav=false;
}

function Leave_Panel_Nav(){
Panel_Nav=false;
}

Answer 1

我宁愿只使用 HTML 和 CSS3 来做这些事情。

button {
    width: 40px;
    height: 40px;
    position: relative;
}

button > div.panel {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 40px;
    transition: all .3s;
    visibility: hidden;
    opacity: 0;
    width: 200px;
    height: 80px;
    background: white;
    border: 2px solid;
}

button:hover > div.panel {
    visibility: visible;
    opacity: 1;
}

<button>
    B1
    <div class="panel" id="Panel_Equipment">Panel_Equipment</div>
</button>
<button>
    B2
    <div class="panel" id="Panel_Report">Panel_Report</div>
</button>