當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

利用 CSS selector 改变悬停表格样式

發(fā)布時間：2025/7/14 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了利用 CSS selector 改变悬停表格样式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?? 在WEB應(yīng)用中，為了方便用戶查看表格，將鼠標(biāo)懸停的表格行改變樣式，如改變底色，會給用戶很好的體驗(yàn)，特別是表格比較寬的時候，不會看串行。
?? 原來為了實(shí)現(xiàn)這個功能，我的辦法是用js捕獲鼠標(biāo)事件來完成：

今天在看Dave Crane的《Ajax in Action》附帶的示例時，發(fā)現(xiàn)有 span:hover 這樣的CSS 選擇器，原來一直以為 hover 是應(yīng)用在鏈接TAG上的，沒想到還可以這樣用。進(jìn)一部聯(lián)想如果是這樣的話，表格行的懸停是否可以呢？經(jīng)過試驗(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>

這個方法可以使代碼簡潔不少。不僅僅是tr標(biāo)簽可以這樣使用，其他如div,img,span等都可以，進(jìn)一步的聯(lián)想就留給大家吧。
順便說下，還可以利用CSS選擇器對數(shù)值進(jìn)行判斷以用不同的樣式顯示出來，比如出現(xiàn)負(fù)數(shù)就紅字等。具體的文檔大家可以參看W3C網(wǎng)站。

轉(zhuǎn)載于:https://www.cnblogs.com/hsxixi/archive/2008/11/22/1339144.html

總結(jié)

以上是生活随笔為你收集整理的利用 CSS selector 改变悬停表格样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。