Question

我正在尝试创建一个表并折叠标题元素ON HOVER的边框，而表的其余部分保持不变。如果我尝试使用整个表格，它会起作用，但当我只在th上尝试时它不会。我究竟做错了什么？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>

table
{
    border:3px solid black;


}

tr{
 background: #FFFF66;
 }

td{
    border:1px solid red;
}

th{
    border:2px solid blue;
    transition:transform 2s;

}

table:hover th{
    border-collapse: collapse;
    transform: rotate(360deg);
}

</style>
</head>
<body>

<h2>Most Watched Shows:</h2>
<table  width="70%">
  <tr>
    <th>Top 5</th>
    <th>6-10</th>
  </tr>
  <tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a></td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a></td>
  </tr>
  <tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a></td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a></td>
  </tr>
  <tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a></td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a></td>
  </tr>
    <tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a></td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a></td>
  </tr>
    <tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a></td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a></td>
  </tr>
</table>
</body>
</html>

Answer 1

您可以使用CSS ::after Selector来模拟它。我希望Jsfiddle可以帮助你。

table
{   
    border-collapse: collapse;
}

tr{
 background: #FFFF66;
 }

td{
    border:1px solid red;    
}

th{
    position: relative;

}

th:after
{
    content:'';
    display: block;
    border:2px solid blue;
    transition: transform 2s;
    position: absolute;
    right: -2px;
    left: -2px;
    top: -2px;
    bottom: -2px;
    -webkit-transition: transform 2s;
    -moz-transition: transform 2s;
    -ms-transition: transform 2s;
    -o-transition: transform 2s;
    transition: transform 2s;
    
}

table th:hover:after,
table th:hover{  
    -webkit-transform: rotate(360deg) ;
    -moz-transform: rotate(360deg) ;
    -o-transform: rotate(360deg) ;
    -ms-transform: rotate(360deg) ;
    transform: rotate(360deg) ;
}

<h2>Most Watched Shows:</h2>
<table  width="70%">
  <tr>
    <th>Top 5</th>
    <th>6-10</th>
  </tr>
  <tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a></td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a></td>
  </tr>
  <tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a></td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a></td>
  </tr>
  <tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a></td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a></td>
  </tr>
    <tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a></td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a></td>
  </tr>
    <tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a></td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a></td>
  </tr>
</table>

表标题未获得边框折叠

1 个答案: