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に組めますね
