在鼠标悬停时添加边框

Question

我想让一个表格边框(我可以使用css设置，而不是内联border=属性)设置为边框: 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

交换表上的类可能比直接编辑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 3

在mouseenter and mouseleave events上查看这篇文章。

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