Question

弹出窗口是否可能始终与表格高度相同？如果桌子向下移动，弹出窗口也应该向下移动。或者是否可以添加第四列并在其中显示弹出窗口？或者有更好的方法吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style>
        #matrix table {
            width:300px;
            border-collapse:collapse;
        }

        #matrix td {
            border:1px solid black;
        }

        #matrix td:hover {
          background-color: #ff0000;
        }

        #matrix td span {
            display: none;
        }

        #matrix td:hover span {
            display: block;
            position: absolute;
            top: 8px;
            left: 310px;
            width: 100px;
            background: #e5e5e5;
        }
    </style>
</head>
<body>
    <div id="matrix">
        <table>
            <tr>
                <td>1<span>Further information 1</span></td>
                <td>2<span>Further information 2</span></td>
                <td>3<span>Further information 3</span></td>
            </tr>
            <tr>
                <td>4<span>Further information 4</span></td>
                <td>5<span>Further information 5</span></td>
                <td>6<span>Further information 6</span></td>
           </tr>
            <tr>
                <td>7<span>Further information 7</span></td>
                <td>8<span>Further information 8</span></td>
                <td>9<span>Further information 9</span></td>
            </tr>
        </table> 
    </div>
</body>
</html>

Answer 1

在#matrix td：hover span：

上尝试以下操作

显示：内联;

并删除：

顶部：8px;

＆＃13;

        #matrix table {
            width:300px;
            border-collapse:collapse;
        }

        #matrix td {
            border:1px solid black;
        }

        #matrix td:hover {
          background-color: #ff0000;
        }

        #matrix td span {
            display: none;
        }

        #matrix td:hover span {
            display: inline;
            position: absolute;
            left: 310px;
            width: 100px;
            background: #e5e5e5;
        }

＆＃13;

    <div id="matrix">
        <table>
            <tr>
                <td>1<span>Further information 1</span></td>
                <td>2<span>Further information 2</span></td>
                <td>3<span>Further information 3</span></td>
            </tr>
            <tr>
                <td>4<span>Further information 4</span></td>
                <td>5<span>Further information 5</span></td>
                <td>6<span>Further information 6</span></td>
           </tr>
            <tr>
                <td>7<span>Further information 7</span></td>
                <td>8<span>Further information 8</span></td>
                <td>9<span>Further information 9</span></td>
            </tr>
        </table> 
    </div>

＆＃13;

希望有所帮助

相对于表y-Position的弹出位置

1 个答案: