HTML/JQueryのホバー上のパネルの表示/非表示

Question

私はMSSQLクエリで投げ捨てられたPHPでHTMLにかなり慣れていますが、私はいくつかのjqueryが必要な場合があるページにいくつかの追加機能を追加したいと思います。

私の質問：「今日の仕事」パネルの「詳細を表示」の上にカーソルを置いて「詳細を表示」からカーソルが移動したときに非表示にすると、以下のスクリーンショットに示すように、 ？現時点ではいつも目に見える。各セクションの構築方法を示すコードスニペットをいくつか含めました。

ジョブズパネルをビルドします。

  <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()) 

最初の機能は、[次にjQueryの表示/非表示パネルとパネル内のコンテンツにカーソルを合わせ] hover inハンドラ及び第一のhover out