Question

我正在尝试为循环风格锦标赛设置鼠标悬停突出显示效果，以便当一个人将鼠标放在玩家A对阵玩家B的结果时，该单元格以及显示玩家B对抗玩家A的结果的单元格都突出显示。为了说明这一点，以下是我要强调的页面：http://yppc.zzl.org/groups.html。我还没有找到可以同时突出显示非相邻单元格的鼠标悬停脚本。我已经在另一个网站上看到了这种效果，但不幸的是联盟没有参加比赛并且比分已被取消。

感谢您提供任何帮助！

Answer 1

尝试这样的事情：

<html>
    <head>
        <script>
            function hl(cell, enable)
            {
                var rIndex = cell.cellIndex;
                var cIndex = cell.parentNode.rowIndex;
                var cell2 = cell.parentNode.parentNode.rows[rIndex].cells[cIndex];

                if (enable) {
                    cell.style.backgroundColor = '#000';
                    cell2.style.backgroundColor = '#000';
                } else {
                    cell.style.backgroundColor = '#fff';
                    cell2.style.backgroundColor = '#fff';
                }
            }
        </script>
    </head>
    <body>
        <table border="1">
            <tr>
                <td></td>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
            <tr>
                <td>A</td>
                <td></td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">A:B</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">A:C</td>
            </tr>
            <tr>
                <td>B</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">B:A</td>
                <td></td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">B:C</td>
            </tr>
            <tr>
                <td>C</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">C:A</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">C:B</td>
                <td></td>
            </tr>
        <table>
    </body>
</html>

如何在鼠标悬停时突出显示非相邻的表格单元格？

1 个答案: