在悬停的 td 上方的 td 上覆盖 div答案

【问题标题】：Overlay div on td one row above hovered td在悬停的 td 上方的 td 上覆盖 div
【发布时间】：2012-08-23 20:06:04
【问题描述】：

我有一个表，他由 3 列和 n 行组成。我想做的是这个。当您将鼠标悬停在 td 上方时，所有 td 上方都将被“着色”，我尝试仅使用 onmouseover 和 box-shadow 执行此操作，但文本会出现在阴影上方。于是我就想，为什么不直接做一个透明背景的div，然后把盒子阴影放在那里呢？当我在萤火虫中插入 div 时，效果很好。所以我继续尝试使用 jQuery 动态创建 div。他是我的 js 文件中的相关代码，适用于盒子阴影的东西。

TL;DR：我需要在所有 td 的正上方创建 div，然后将鼠标悬停在上面并做一个 box-shadow inset

所有这些都在 td 鼠标上

    var col , row, t=$(this);
    col = t.index();
    row= t.closest('tr').index();
    var end = 3 * row + col -1;

  while(end > 0){

      var i=1;
      var tdLeftPosition = $('td:eq('+ end-3 +')').offset().left;
      var tdTopPosition = $('td:eq('+ end-3 +')').offset().top;
      var tdWidth = $('td:eq(2)').css('width');
      var tdHeight = $('td:eq(2)').css('height');

      $("<div class = 'shadow-box' id='divTdOverlay"+i+"' style='height:"+ tdHeight+"px;width:"+ tdWidth +"px;top:"+ tdTopPosition +"px;left:"+ tdLeftPosition +"px;' />");
//This is the box shadowing that I have comented out
//    $('td').slice(end-3, end-2).stop().animate({boxShadow: '0 0 170px #000000 inset'}, 'fast');
      i++;
      // used to get the td's position in the array one row up 
      end -= 3;
  }

所以当我在我的网站上尝试鼠标悬停时，我得到了这个错误

语法错误，无法识别的表达式：NaN)
throw new Error("语法错误，无法识别的表达式：" +msg );

它在未压缩的 jQuery 文件的第 4267 行

编辑：

想通了。由于某种原因，end-3 部分导致了错误，所以我将它放在一个名为 prevrow 的变量中并用它替换了 end-3

 var i=1;
 var prevrow = end-3;
 var tdLeftPosition =  $('td:eq('+ prevrow +')').offset().left;
 var tdTopPosition = $('td:eq('+ prevrow +')').offset().top;
 var tdWidth = $('td:eq(2)').css('width');
 var tdHeight = $('td:eq(2)').css('height');

但是 div 仍然没有出现。关于这个问题：如果有人有任何建议，我仍然会很感激他们。

【问题讨论】：

标签： jquery html html-table overlay shadowing

【解决方案1】：

我会这样做：

您可以通过将其保存为 HTML 页面并在浏览器中打开它来快速轻松地测试它！

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
    <style>
        td {
            padding: 5px;
        }
        .shadow-box {
            padding: 5px;
            display: none;
            position: absolute;
            background: rgba(0, 0, 0, 0.7); 
            z-index: 10;

        }
    </style>
    <script>
        var getRow = function(td) {
            var row = td.parent().parent().children().index(td.parent());
            return row;
        }
        var getCol = function(td) {
            var col = $(td).parent().children().index(td);
            return col;
        }

        $(function () {         

            $('td').each(function () {

                var $this = $(this);
                var pos = $this.position();
                var width = $this.width();
                var height = $this.height();

                $('body').append("<div class='shadow-box "+ getRow($this)  +getCol($this) +"' style='width:" + width + "px; height: " + height + "px; top: " + pos.top + "px; left: " + pos.left + "px;'></div>");       

            });

            $('.shadow-box').hover(function () {
                $(this).hide();
            });


            $('td').hover(function () {

                var col = getCol($(this));
                var row = getRow($(this));

                shadeCells(col, row);
            });

            function shadeCells(col, row) {

                $('td').each(function () {

                    var $this = $(this);
                    var thisRow = getRow($this);
                    var thisCol = getCol($this);

                    if ((thisCol == col) && (thisRow < row)) {

                        $('.' + thisRow + thisCol).show();
                    }

                    else{
                        $('.' + thisRow + thisCol).hide();
                    }

                });

            }
            $('table').mouseleave(function () {
                $('.shadow-box').hide();
            });
        });
    </script>
</head>
<body>

    <table>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
        <tr>
            <td>Contents</td>   
            <td>Contents</td>
            <td>Contents</td>
        </tr>
    </table>

</body>
</html>

【讨论】：