Question

我是一个相当新的HTML，有一些PHP用于MSSQL查询，但我想为我正在构建的页面添加一些额外的功能，可能需要一些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

首先，添加一些类来区分.header中的.details：

<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

悬停时HTML / JQuery显示/隐藏面板

1 个答案: