回転し重なっているDIVを選択する

Question

私は以下のjsFiddleに示すようなテーブルを持っています。私はその上にマウスを置くと背景色が（ハイライトのように）変化するようにしたい。私はそれを持っているほとんど働いているが、死んだ斑点があります。私はdivモデルを45度回転させているので、これがボックスモデルの重なりと関係していると仮定しています。

jsFiddle Example ::各ヘッダーの下部または最後のヘッダーの任意の部分にマウスを重ねると、背景がどのように点灯するのかを確認します。それから、以前のものにはデッドスポットがあります。

<table> 
    <thead> 
    <tr> 
    <th class="rotateHeader"> 
     <div> 
     <span>This is my title</span> 
     </div> 
    </th> 
    <th class="rotateHeader"> 
     <div> 
     <span>This is my title</span> 
     </div> 
    </th> 
    <th class="rotateHeader"> 
     <div> 
     <span>This is my title</span> 
     </div> 
    </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>100</td> 
    <td>100</td> 
    <td>100</td> 
    </tr> 
    </tbody> 
</table> 

誰かがどのように私はそれをマウスオーバー時に強調する各ヘッダーの全体のdivを得ることができるアイデアがありますか？

Answer 1

もう1つはz-index問題です。 div30に設定する必要があります。hoverは<th>から始まります。

* {padding: 0; margin: 0; box-sizing: border-box; } 
 
table { border-collapse: collapse; margin: 10px; } 
 

 
.rotateHeader { 
 
    height: 100px; 
 
    width: 40px; 
 
    min-width: 40px; 
 
    max-width: 40px; 
 
    position: relative; 
 
    vertical-align: bottom; 
 
    padding: 0; 
 
} 
 

 
.rotateHeader > div { 
 
    position: relative; 
 
    z-index: 999; 
 
    top: 0; 
 
    left: 50px; 
 
    height: 100%; 
 
    -webkit-transform: skew(-45deg,0deg); 
 
    -moz-transform: skew(-45deg,0deg); 
 
    -ms-transform: skew(-45deg,0deg); 
 
    -o-transform: skew(-45deg,0deg); 
 
    transform: skew(-45deg,0deg); 
 
    overflow: hidden; 
 
    border-left: 1px solid #E34949; 
 
    border-right: 1px solid #620F0F; 
 
    border-top: 1px solid #620F0F; 
 
    background-color: #b71c1c; 
 
    color: #FFF; 
 
} 
 

 
.rotateHeader span { 
 
    -webkit-transform: skew(45deg,0deg) rotate(315deg); 
 
    -moz-transform: skew(45deg,0deg) rotate(315deg); 
 
    -ms-transform: skew(45deg,0deg) rotate(315deg); 
 
    -o-transform: skew(45deg,0deg) rotate(315deg); 
 
    transform: skew(45deg,0deg) rotate(315deg); 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: -25px; 
 
    display: inline-block; 
 
    width: 85px; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
} 
 

 
.rotateHeader > div:hover { background-color: #CE1F1F; cursor: pointer; }

<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="rotateHeader"> 
 
     <div> 
 
      <span>This is my title</span> 
 
     </div> 
 
     </th> 
 
     <th class="rotateHeader"> 
 
     <div> 
 
      <span>This is my title</span> 
 
     </div> 
 
     </th> 
 
     <th class="rotateHeader"> 
 
     <div> 
 
      <span>This is my title</span> 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>100</td> 
 
     <td>100</td> 
 
     <td>100</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

問題は、あなたのth sが偏っていないが、その子であるです。最初のdivの右上にマウスを置くと、それは機能します。あなたはthが終了した地域です！この問題を解決するにはthもスキューしてください。

* {padding: 0; margin: 0; box-sizing: border-box; } 
 
table { border-collapse: collapse; margin: 10px; margin-left: 50px; } 
 

 
.rotateHeader { 
 
    height: 100px; 
 
    width: 40px; 
 
    min-width: 40px; 
 
    max-width: 40px; 
 
    position: relative; 
 
    vertical-align: bottom; 
 
    padding: 0; 
 
} 
 
.rotateHeader{ 
 
    -webkit-transform: skew(-45deg,0deg); 
 
\t -moz-transform: skew(-45deg,0deg); 
 
\t \t -ms-transform: skew(-45deg,0deg); 
 
\t \t -o-transform: skew(-45deg,0deg); 
 
\t \t transform: skew(-45deg,0deg); 
 
} 
 
    .rotateHeader > div { 
 
    position: relative; 
 
    top: 0; 
 
    
 
    height: 100%; 
 
    
 
\t \t overflow: hidden; 
 
\t \t border-left: 1px solid #E34949; 
 
\t \t border-right: 1px solid #620F0F; 
 
\t \t border-top: 1px solid #620F0F; 
 
\t \t background-color: #b71c1c; 
 
    color: #FFF; 
 
    } 
 
    
 
    .rotateHeader span { 
 
    -webkit-transform: skew(45deg,0deg) rotate(315deg); 
 
\t \t -moz-transform: skew(45deg,0deg) rotate(315deg); 
 
\t \t -ms-transform: skew(45deg,0deg) rotate(315deg); 
 
\t \t -o-transform: skew(45deg,0deg) rotate(315deg); 
 
\t \t transform: skew(45deg,0deg) rotate(315deg); 
 
\t \t position: absolute; 
 
\t \t bottom: 30px; 
 
\t \t left: -25px; 
 
\t \t display: inline-block; 
 
\t \t width: 85px; 
 
\t \t text-align: left; 
 
\t \t white-space: nowrap; 
 
    } 
 
    
 
    .rotateHeader:hover div { background-color: #CE1F1F; cursor: pointer; }

<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="rotateHeader"> 
 
     <div> 
 
      <span>This is my title</span> 
 
     </div> 
 
     </th> 
 
     <th class="rotateHeader"> 
 
     <div> 
 
      <span>This is my title</span> 
 
     </div> 
 
     </th> 
 
     <th class="rotateHeader"> 
 
     <div> 
 
      <span>This is my title</span> 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>100</td> 
 
     <td>100</td> 
 
     <td>100</td> 
 
    </tr> 
 
    </tbody> 
 
</table>