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

尝试回答这个问题而不能运行你的代码以便它可以工作，所以我正在回答文本本身 - 我采取的方法是没有javascript。这很简单，看一看！

$(document).ready

.info-button {
  padding: 5px 10px;
  background: #afa;
  display: inline-block;
  position: relative;
}

.info-box {
  display:none;
}

.info-button:hover .info-box {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  padding: 0 20px 10px;
  background: #faa;
}

Answer 2

我更喜欢仅使用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>

Answer 3

$('.btn').hover(function(){
  $('#'+$(this).data('open')).animate({width:'200px'},300);
},function() {
  $('#'+$(this).data('open')).animate({width:'0px'},300);
});

div {
 width:0;
 overflow:hidden;
 background: #ccc; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-open="Panel_Equipment" ><span>asdada</span></button>
<button class="btn" data-open="Panel_Report"><span>sdasda</span></button> 

<div id='Panel_Equipment'>text 1</div>
<div id='Panel_Report'> text 2</div>

Answer 4

尝试使用jquery的hover()函数。并删除内联mouseover

＆＃13;

$('button').hover(function(){
 $('#'+$(this).attr('data-target')).animate({width:'show'},300);
},function(){
$('.panel').animate({width:'hide'},300);
})

＆＃13;

.panel{
width:100px;
height:50px;
border:1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Btn_Nav_Equipment"  data-target="Panel_Equipment">one<span></span></button>
<button id="Btn_Nav_Report" data-target="Panel_Report">two<span></span></button>

<div id='Panel_Equipment'  class="panel" style="display:none;">Panel_Equipment</div>
<div id='Panel_Report'  class="panel" style="display:none;">Panel_Report</div>

＆＃13;

Answer 5

这是一个简单的CSS3解决方案，使用jQuery在悬停时切换类：

＆＃13;

let $info = $(".info")

$("button").hover( () => {
	$info.addClass("onscreen")
}, () => {
	$info.removeClass("onscreen")
})

＆＃13;

button {
  margin: 20px;
}

div.info {
  position: absolute;
  top: 50px;
  width: 200px;
  height: 200px;
  background: #90ee90;
  display: flex;
  justify-content: center;
   align-items: center;
   
   transform : translateX(-100%);
   opacity : 0;
   transition: all 0.3s ease-in-out;
}
div.info.onscreen {
    transform: translateX(0);
    opacity : 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover me</button>

<div class="info">
 <span>Div content</span>
</div>

＆＃13;

Answer 6

尝试使用以下解决方案。

$(document).on("mouseover",".btn,.panel",function(){
	if($(this).hasClass("panel")){
  	$(this).removeClass("collapsed");
  }
  else{
    var panel = $(this).attr("data-panel");  
    $("."+panel).removeClass("collapsed");	
  }
});

$(document).on("mouseout",".btn,.panel",function(){
	$(".panel").addClass("collapsed");
});

.collapsed{
  display:none;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<button class="btn_Equipment btn" data-panel="Panel_Equipment"><span>Equipment</span></button>
<button class="btn_Report btn" data-panel="Panel_Report"><span>Report</span></button> 

<div class='Panel_Equipment collapsed panel'>Equipment Div </div>
<div class='Panel_Report collapsed panel'>Report Div</div>

Javascript Jquery显示/隐藏div更好的解决方案

6 个答案: