选择旋转和重叠的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

这只是另一个z-index问题。您必须在div上设置它，其他hover从<th>开始。

＆＃13;

＆＃13;

* {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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是你的th没有歪斜，但他们的孩子是。如果你将鼠标悬停在第一个div的右上角，它就可以工作了。这是你th结束的地区！为了解决这个问题，你的th也会出现问题。

＆＃13;

＆＃13;

* {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);
	  -moz-transform: skew(-45deg,0deg);
		-ms-transform: skew(-45deg,0deg);
		-o-transform: skew(-45deg,0deg);
		transform: skew(-45deg,0deg);
}
  .rotateHeader > div {
    position: relative;
    top: 0;
    
    height: 100%;
   
		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:hover div { background-color: #CE1F1F; cursor: pointer; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;