在鼠標懸停上添加邊框

Question

我希望將表格邊框（可以使用CSS設置，而不是內聯邊框=屬性）設置爲邊框：1px純黑色;當我將鼠標懸停在桌面上時。

我該如何在jQuery中做到這一點。我認爲它與本頁頂部的按鈕（問題，標籤，用戶等）發生的情況相同，只不過它是背景顏色變化的div，而我想更改表格的邊框。但是這個概念是一樣的。

Answer 1

對於懸停效果，jQuery提供了hover（）僞事件，其行爲比moueseenter/mouseleave好。此外，這是一個好主意，創建每種狀態的CSS類（正常和懸停），然後更改懸停類：

$(document).ready(function() { 
    $("#tableid").hover(
     function() { $(this).addClass("Hover"); }, 
     function() { $(this).removeClass("Hover"); } 
    ); 
}); 

你的CSS看起來是這樣的：

table.Hover { border: 1px solid #000; } 

Answer 2

看看這篇文章mouseenter and mouseleave events。

$("table#mytable").mouseenter(function(){ 
     $("table#mytable",this).css("border", "solid 1px black"); 
    }).mouseleave(function(){ 
     $("table#mytable",this).css("border", "o"); 
    }); 

Answer 3

它可以更好地在桌子上交換類，而不是直接編輯CSS屬性的 - 這將是一個更具擴展性/可擴展的解決方案：

table { 
    border:0; 
} 

table.border { 
    border:1px solid #000; 
} 

當然，你的表會在位置1px的「跳」時，日Ë邊框添加，所以也許這是更好地使用保證金或當你不徘徊白色邊框：

table { 
    border:1px solid #fff; 
} 

table.border { 
    border:1px solid #000; 
} 

或最佳的是，如果你不需要與IE6兼容，你可以用純做到這一切CSS：

table { 
    border:1px solid #fff; 
} 

table:hover { 
    border:1px solid #000; 
} 

這將是最好/最簡單/可擴展的方法！

Answer 4

或者，與「邊界」相對的「大綱」不會佔用元素佈局中的額外空間。