dqeonr8554 2017-06-22 15:39
浏览 278
已采纳

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

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.

Screeny of the page so far

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

展开全部

  • 写回答

1条回答 默认 最新

  • duangelin7513 2017-06-22 15:59
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 代写uni代码,app唤醒
  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部