爲什麼我需要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來製作：之後：在工具提示工作之前？

回答

相關問題