Bootstrap3
日本語リファレンス

広告

ホバー  Hover rows


table要素のclass属性にtable-hoverを追加することで、何れかのデータ行にカーソルを合わたとき、その行の背景色を変更する。


サンプル
順位 名前 惑星 勝点
1 ブルーSC 地球 101
2 FCウェヌス 金星 83
3 ジュピターFC 木星 68
4 SCマーキュリー 水星 67
5 FCマルス 火星 65
ソースコード
<table class="table table-hover">
	<thead>
		<tr>
			<th>順位</th>
			<th>名前</th>
			<th>惑星</th>
			<th>勝点</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>ブルーSC</td>
			<td>地球</td>
			<td>101</td>
		</tr>
		<tr>
			<th>2</th>
			<td>FCウェヌス</td>
			<td>金星</td>
			<td>83</td>
		</tr>
		<tr>
			<th>3</th>
			<td>ジュピターFC</td>
			<td>木星</td>
			<td>68</td>
		</tr>
		<tr>
			<th>4</th>
			<td>SCマーキュリー</td>
			<td>水星</td>
			<td>67</td>
		</tr>
		<tr>
			<th>5</th>
			<td>FCマルス</td>
			<td>火星</td>
			<td>65</td>
		</tr>
	</tbody>
</table>

広告