bootstrap鼠标悬停明显高亮实例

最新推荐文章于 2024-07-12 09:51:03 发布

1002710030

最新推荐文章于 2024-07-12 09:51:03 发布

阅读量424

点赞数

文章标签： bootstrap javascript ecmascript

本文链接：https://blog.csdn.net/qq_35776207/article/details/131181273

版权

//由于bootstrap自带的悬停高亮很不明显，就有了这个实例
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src="jquery.min.js"></script>
	<script src="bootstrap.min.js"></script>
</head>
<style>
.my-table tr:hover {
	background-color: rgb(155,194,230);//这里可自定义颜色
}
</style>

<table class="table my-table">
	<thead>
		<tr>
			<th>#</th>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
			<td>2</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3</td>
			<td>3</td>
			<td>3</td>
		</tr>
	</tbody>
</table>


</body>
</html>