Result
マウスホバーしてるところ以外をぼかしてホバー中のコンテナをハイライトする、みたいなの。
この手の手法とコードはほぼ同じです。
css
table {/*table全体*/
background: #f5f5f5;
border-collapse: separate;
font-size: 12px;
line-height: 24px;
margin: 30px auto;
text-align: left;
}
th {
background: #444;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
}
td {
border-bottom: 1px solid #e8e8e8;
padding: 10px 15px;
position: relative;
transition: all 300ms;
}
tbody:hover td {/*一旦、全部ぼかす。テキストは非表示にしてtext-shadowのみ表示*/
color: transparent;
text-shadow: 0 0 3px #aaa;
}
tbody:hover tr:hover td {/*ホバーしてる行だけ通常表示に戻す*/
color: #444;
text-shadow: 0 1px 0 #fff;
}
html
<table>
<thead>
<tr>
<th>Option</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>showSpeed</strong></td>
<td>15</td>
・
・
・
</tbody>
</table>
通常のHTMLでOKなので既存のCSSに組めますね
