表格隔行变色_CSS实现鼠标悬停高亮
生活随笔
收集整理的這篇文章主要介紹了
表格隔行变色_CSS实现鼠标悬停高亮
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!doctype html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>表格隔行變色_CSS實現鼠標懸停高亮</title><meta name="keywords" content="" /><meta name="description" content="" /> <script type="text/javascript" src="../jquery-1.8.2.js"></script><script type="text/javascript">$(function(){//通過jQuery控制表格隔行換色，并鼠標懸停變色
$('tr:even:gt(0)').addClass('tr_even'); //默認偶數行背景色，無視標題行用:gt(0)
$('tr:odd').addClass('tr_odd'); //默認奇數數行背景色////
});</script><style type="text/css">.headCls{background-color:#ccc;} /* 標題背景色 */.tr_even{background-color:#EBF8FF} /* 偶數行背景色 */.tr_odd{background-color:#DDECF3} /* 奇數行背景色 */ .tr_even:hover,.tr_odd:hover{background-color:red;} /* 通過CSS實現鼠標懸停高亮色 */</style>
</head>
<body><table border="1" width="100%" cellspacing="0" cellpadding="0"><tr class="headCls"><th>CSS實現鼠標懸停高亮</th><th>CSS實現鼠標懸停高亮</th></tr><tr><td>data1_1</td><td>data1_2</td></tr><tr><td>data2_1</td><td>data2_2</td></tr><tr><td>data3_1</td><td>data3_2</td></tr><tr><td>data4_1</td><td>data4_2</td></tr><tr><td>data5_1</td><td>data5_2</td></tr></table></body>
</html>
?
轉載于:https://www.cnblogs.com/martinzhang/p/3299228.html
總結
以上是生活随笔為你收集整理的表格隔行变色_CSS实现鼠标悬停高亮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 取消晚自习、周末变双休？北京部分学校回应
- 下一篇： javascript要点