懸停的HTML/JQuery顯示/隱藏面板

Question

我是相當新的HTML與一些PHP引發MSSQL查詢，但我想添加一些額外的功能，我正在建設，可能需要一些jQuery的一個頁面。

我的問題：當我將鼠標懸停在「今日工作」面板的「查看詳細信息」上並顯示光標從「查看詳細信息」時隱藏時，如何顯示/出現如下屏幕截圖所示的主面板。 ？目前它始終可見。我已經包含了一些代碼片段來展示每個部分是如何構建的。

構建Jobs面板：

  <div class="row"> 
      <div class="col-lg-3 col-md-6"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"> 
         <div class="row"> 
          <div class="col-xs-3"> 
           <i class="fa fa-tasks fa-5x"></i> 
          </div> 
          <div class="col-xs-9 text-right"> 
           <div class="huge"><?php echo $jobCount ?></div> 
            <div>Jobs Today</div> 
          </div> 
         </div> 
        </div> 

         <div class="panel-footer"> 
          <span class="pull-left">View Details</span> 
          <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> 
          <div class="clearfix"></div> 
         </div> 

       </div> 
      </div> 

構建主面板提前（尚未與作業信息填充）

  <div class="col-lg-4"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        Primary Panel 
       </div> 
       <div class="panel-body"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p> 
       </div> 
       <div class="panel-footer"> 
        Panel Footer 
       </div> 
      </div> 
     </div> 

一如既往，感謝。希望我沒有錯過任何東西:)

編輯：我現在有隱藏工作。詳細信息面板在頁面首次加載時顯示，我將鼠標懸停在「查看詳細信息」上，並且當我離開面板時消失。我錯過了什麼。這裏是代碼現在是：

<div class="row"> 
<div class="col-lg-3 col-md-6"> 
    <div class="panel panel-primary"> 
    <div class="panel-heading"> 
    <div class="row"> 
     <div class="col-xs-3"> 
     <i class="fa fa-tasks fa-5x"></i> 
     </div> 
     <div class="col-xs-9 text-right"> 
     <div class="huge"> 
      <?php echo $jobCount ?> 
     </div> 
     <div>Jobs Today</div> 
     </div> 
    </div> 
    </div> 
    <div id="jobs-wrapper"> 
    <a href="#"> 
     <div class="panel-footer" data-panel="job-details"> 
     <span class="pull-left">View Details</span> 
     <span class="pull-right"><i class="fa fa-arrow-circle-right"></i>    </span> 
     <div class="clearfix"></div> 
     </div> 
    </a> 
    </div> 
</div> 
</div> 
<!-- /.row --> 

<div class="col-lg-4"> 
<div class="panel-primary-jobs" id="job-details"> 
    <div class="panel-heading"> 
    Jobs Today 
    </div> 
    <div class="panel-body"> 
    <p>This is where Job info will go</p> 
    </div> 
    <div class="panel-footer"> 
     Close 
    </div> 
    </div> 
    </div> 
</div> 

和jQuery的

$('#jobs-wrapper a').mouseenter(function(e) { 
if ($(this).data('panel')) 
{ 
    $('.panel-primary-jobs').hide(); 
    $('#' + $(this).data('panel')).show(); 
} 
}); 
$('#jobs-wrapper').mouseleave(function() 
{ 
    $('.panel-primary-jobs').hide(); 
} 
); 

Answer 1

首先，從.details添加一些類來分辨的.header：

<div class="panel panel-primary header">...</div> 

<div class="panel panel-primary details hidden">...</div> 

然後：

$('.primary-panel .panel-footer') 
    .hover(() => $('.details').show(),() => $('.details').hide()) 

第一個功能是所述hover in處理程序，第二個，的hover out