在鼠标悬停上添加边框

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

或者，与“边界”相对的“大纲”不会占用元素布局中的额外空间。