Question

我有一个表格，其中包含从tr：hover和tr：action使用：after和：before调用的工具提示。 JsFiddle here

编辑：如果我没有位置：td中的relative或tr中的rotateX（0）：hover td工具提示不再出现...... 为什么需要这个？

CSS

/*Striped background to show transparency */
body{
        background-image: linear-gradient(black 10%, transparent 10%);
        background-size: auto 10px;
}
/*Base format*/
table {
    float: left;
    table-layout: auto;
    border-collapse: seperate;
    border-spacing: 1px 0;
    text-align: left;
    cursor: default;
}
td {

    /*Fix 1 ?????????????????????????????????????????????????????????????*/
    position: relative;
    /*???????????????????????????????????????????????????????????????????*/

    /*Dynamic elements*/
    background-image: linear-gradient(to top, #0033CC, #FFFFDB);
    opacity: 0.5;
}

/* Header*/
    th {
        padding-left: 1%; /*not inherited from table*/
        width: 50%;
        color: #FFFF66;
        background-color: #0000CC;
    }
    tr:active th {
        opacity: 0.5;
        color: red;
    }

/* Tool tip base*/
    /*body*/
    tr:hover td:last-child:after, tr:active td:last-child:after {
        white-space: nowrap;
        position: absolute;
        left: calc(100% + 6px);
        border-radius: 5px;
        color: black;
    }
    /*pointer*/
    tr:hover td:last-child:before, tr:active td:last-child:before{
        /*make a little arrow beside the tool tip */
        content: '';
        border: solid;
        width: 0; height: 0;
        border-color: transparent #cacae1 transparent transparent;
        border-width: 6px 6px 6px 0;
        bottom: calc(50% - 6px);
        left: 100%;
        position: absolute;
    }

/*Row hover*/
    tr:hover td {
        /*transform background gradient*/
        background: linear-gradient(to top,#4D70DB,#FFFF00);
        /*transform opacity for the element*/
        opacity: 0.8;

        /*Fix 2 ?????????????????????????????????????????????????????????????*/
        transform: rotateX(0);
        /*???????????????????????????????????????????????????????????????????*/
    }
    /* adjust tool tip */
    tr:hover td:last-child:after {
        content: 'Click to SELECT';
        box-shadow: 0 0 8px #FFFF00;
        background-image: linear-gradient(to top,#4D70DB,#FFFF00);
    }

/*Row select*/
    tr:active td {
        opacity: 1.0;
        color: red;
        background-image: linear-gradient(to top,#4D70DB,#FF8585);
    }
    /* adjust tool tip */
    tr:active td:last-child:after {
        content: 'SELECTED';
        background-image: linear-gradient(to top,#4D70DB,#FF8585);
        box-shadow: 0 0 8px red;
        color: red;
    }

HTML

<body>
    <table border="0" width="75%" draggable="false">
        <tr id="header">
            <th><b>COL1</b></th>
            <th><b>COL2</b></th>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>
</body>

Answer 1

当元素为positioned absolutely时，它的位置与其containing block相关（通常是其最近的位置祖先）。应用transform create a new containing block的某些值。

这就是为什么（如评论中所提到的）用position: relative替换变换具有相同的效果。它也会创建一个包含块，使您的绝对元素相对于它定位。

使用相对定位的祖先比在需要创建新的包含块时应用不需要的变换更为标准。我建议您使用position: relative替换转换。

为什么我需要rotateX来制作：之后：工具提示工作之前？

1 个答案: