HTML/JQuery show/hide panel on hover - php

Question

I am fairly new to HTML with some PHP thrown in for MSSQL queries, but I would like to add some additional functionality to a page I am building that may need some jquery.
My question: How can I have the Primary Panel, shown in screen shot below, show/appear when I hover over 'View Details' of the 'Jobs Today' panel and hide when the cursor moves from 'View Details'? At the moment its always visible. I have included some code snippets to show how each section is built.
Build Jobs panel:
<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>
Build Primary Panel (yet to be populated with job info)
<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>
As always, thanks in advance. Hopefully I haven't missed anything :)
EDIT: I now have the hide working. The details panel is shown when the page first loads, I hover over the 'View Details' and when I leave the panel disappears. What am I missing. Here is the code as is now:
<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>
and the 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

First, add some classes to tell apart the .header from the .details:
<div class="panel panel-primary header">...</div>
<div class="panel panel-primary details hidden">...</div>
And then:
$('.primary-panel .panel-footer')
.hover( () => $('.details').show(), () => $('.details').hide())
The first function is the hover in handler and the second one, the hover out