三月8

[CSS]滑鼠移過表格列變色及附加連結效果

css, Web 2.0, 標準, 網頁, 網頁設計 | 1,611 views

老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果….囧…先直接看 Demo 吧！
要達到這種效果，很多教學都是使用 JavaScript 裡的 onmouseover、onmouseout 及 onclick 事件來達成，不過現在有純 CSS 的解法，並且通用多數瀏覽器，這個技巧其實在很多國外網站看過，不過昨天向艾德請教之後才真正學起來^^

#tb td a {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #FFF9E0;
}
#tb td a:hover {
    background: #E2D9B2;
}

關鍵就是使用 display: block 將 a 顯示為區塊元素，然後依照需求設個高度或寬度給它即可，line-height 給予相同高度可以確保文字垂直置中，這樣比使用 JavaScript 方便多囉。

View blog reactions

Trackback:

3 Comments on “[CSS]滑鼠移過表格列變色及附加連結效果”

1. 
   hiro Says:
   

   四月 9th, 2008 at 9:07 上午

   采用Block定义,可都是很多特别的CSS效果的基础哦.
   可以参看”蓝色理想”的Web标准专区
2. 
   lym520 Says:
   

   四月 10th, 2008 at 7:53 下午

   值得參考的網站！非常感謝
3. 
   mayer Says:
   

   六月 15th, 2008 at 1:05 上午

   謝謝啦，學起來了。以後可以用用看

Leave a Reply