close

老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果….囧…先直接看 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 方便多囉。

arrow
arrow
    全站熱搜

    alex0126 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄