2018年01月11日(木)

tableで任意の行にマウスホバーしたら他の行をblurさせる

• 0
• 27
• 10
• 41

Result

See the Pen Fade and Blur on Hover Data Table by kachibito (@kachibito) on CodePen.

マウスホバーしてるところ以外をぼかしてホバー中のコンテナをハイライトする、みたいなの。
この手の手法とコードはほぼ同じです。

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:h...