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