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

我有一个工具提示从tr：hover和tr：action使用：after和：before调用的表。的jsfiddle here 为什么我需要rotateX来制作：之后：在工具提示工作之前？

编辑：如果我没有位置：相对于在TD或rotateX（0）TR：悬停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>

来源

2014-09-03 Cool Blue

哇。在你的例子中有更多的CSS在提琴 – graphicdivine 2014-09-03 16:12:42

@graphicdivine我想它会混乱的帖子...我应该在这里包括它？这似乎是多余的...... – 2014-09-03 16:13:54

也许是因为否则它不清楚什么绝对定位应该作为参考点...切换“位置：相对”的旋转'td'似乎修复它，至少在Chrome中（但在较老的Firefox可能会有问题）。 – CBroe 2014-09-03 16:33:09

，当元件被positioned absolutely，它被定位在相对于其containing block，（通常其最近定位的祖先）。应用transformcreate a new containing block的某些值。

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

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

来源

2014-09-04 20:09:33

谢谢，非常好的答案。我尝试将一个跨度完全定位在转换后的li中时遇到了类似的问题。我需要允许第一个跨度向左浮动，而不管列表是否缩进，所以我在容器中建立了定位并将绝对跨度定位。但是李的转变打破了它的原因与你描述的相同。 – 2014-10-10 11:55:41

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

回答

相关问题