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

Ads

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

via

Fade and Blur on Hover Data Table

タイトルとURLをコピーしました