利用 CSS selector 改变悬停表格样式
?? 在WEB應(yīng)用中，為了方便用戶查看表格，將鼠標(biāo)懸停的表格行改變樣式，如改變底色，會(huì)給用戶很好的體驗(yàn)，特別是表格比較寬的時(shí)候，不會(huì)看串行。
?? 原來(lái)為了實(shí)現(xiàn)這個(gè)功能，我的辦法是用js捕獲鼠標(biāo)事件來(lái)完成：
?
<table>
? <tr οnmοuseοver="this.style.background='#c0c0c0'" οnmοuseοut="this.style.background='#ffffff'">
??? <td>1</td><td>表格內(nèi)容</td>
? </tr>
? <tr οnmοuseοver="this.style.background='#c0c0c0'" οnmοuseοut="this.style.background='#ffffff'">
??? <td>2</td><td>表格內(nèi)容</td>
? </tr>
</table>
?
今天在看Dave Crane的《Ajax in Action》附帶的示例時(shí)，發(fā)現(xiàn)有 span:hover 這樣的CSS 選擇器，原來(lái)一直以為 hover 是應(yīng)用在鏈接TAG上的，沒想到還可以這樣用。進(jìn)一部聯(lián)想如果是這樣的話，表格行的懸停是否可以呢？經(jīng)過(guò)試驗(yàn)，答案是肯定的。IE和Firefox均支持這樣的用法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? <head>
??? <title>新的表格行懸停方法</title>
??? <style type="text/css">
?????? tr:hover{background:#FFCC00;cursor: hand;}
??? </style>
? </head>
? <body>
??? <table>
??????? <tr>
??????????? <td>1</td><td>表格內(nèi)容</td>
??????? </tr>
??????? <tr>
??????????? <td>2</td><td>表格內(nèi)容</td>
??????? </tr>
???? </table>
? </body>
</html>
?
這個(gè)方法可以使代碼簡(jiǎn)潔不少。不僅僅是tr標(biāo)簽可以這樣使用，其他如div,img,span等都可以，進(jìn)一步的聯(lián)想就留給大家吧。
順便說(shuō)下，還可以利用CSS選擇器對(duì)數(shù)值進(jìn)行判斷以用不同的樣式顯示出來(lái)，比如出現(xiàn)負(fù)數(shù)就紅字等。具體的文檔大家可以參看W3C網(wǎng)站。
轉(zhuǎn)載于:https://www.cnblogs.com/hsxixi/archive/2008/11/22/1339144.html
總結(jié)
以上是生活随笔為你收集整理的利用 CSS selector 改变悬停表格样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTML中禁用按钮
- 下一篇： 不同系统之间数据的交互