首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >桌面:显示在tr上:悬停

桌面:显示在tr上:悬停
EN

Stack Overflow用户
提问于 2014-05-16 16:10:24
回答 1查看 148关注 0票数 0

我想在这个网站上复制http://sires.crv4all.us/shop/us/catalog/Holstein的效果

当您悬停一个<tr>时,它会显示光标所在的<tr>行上方的首部信息。

我试过使用jQuery工具提示,但它在顶部显示了头。我想知道如何使它显示为您正在悬停的tr线。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-16 16:36:17

这是我制作的一个小提琴,它产生了这种效果(我对JS/jquery有点陌生,所以请尽管批评我的代码,我知道它效率很低)。

在页面本身看来,这个JS正在驱动它:

代码语言:javascript
运行
复制
  var $div = $('<div class="floating-header" style="position:absolute;z-index:1;display:none"><table><thead></thead></table></div>');
    $(document.body).prepend($div);

    var $source = $('#animals thead');

    // Lock widths
    $source.find('th').each(function(){
      var $this = $(this);
      $this.css({width: + $this.width() + 'px'});
    })

    // Position floater
    $div.find('thead').append($source.html());
    var offset = $source.offset();
    $div.css({
      left: offset.left,                                                       
      top: offset.top
    })

    // Strip off junk
    $th = $div.find('th');
    var thIdx = 0;
    var thLength = $th.length;
            var cartEnabled = false;

    $th.each(function(){
      var $this = $(this);
      $this.html($this.find('a').text());
      if (thIdx<=2 || (cartEnabled && thIdx==(thLength-1))) $this.css({opacity:0});
      thIdx++;
    });

    // Exclude first row (initial state on page load; updated by facets.js)
    $('#animals tbody tr:visible').first().addClass('no-header');

    var HEADER_HEIGHT = $div.height();

    // Set-up events
    $('#animals tbody tr').mouseover(function(){
      var $row = $(this);

      setMyTimeout(function(){
        if ($row.hasClass('no-header')) return;
        $div.stop().css({
          top: ($row.offset().top - HEADER_HEIGHT) + 'px',
          left: $row.offset().left, 
        opacity: 0.5}).fadeIn(200);
      },100);
    });

    $('#animals tbody tr').mouseout(function(){
      setMyTimeout(function(){
        $div.fadeOut(200);
      },50);
    });
  });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23699938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档