jquery - 在鼠标悬停时添加边框

Question

我想要一个表格边框（我可以使用css设置，而不是内联border=属性）设置为边框：1px纯黑色；当我将鼠标悬停在桌子上时。

我该如何在 jQuery 中执行此操作。我认为这与此页面顶部的按钮（问题、标签、用户等）所发生的情况相同，只是它是一个 div，它的背景颜色发生了变化，而我想更改表格的边框。但概念是一样的。

Answer 1

对于悬停效果，jQuery 提供了 hover() 伪事件，它的行为比 mouesenter/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 和 mouseleave 事件的这篇文章。

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

Answer 4

或者，与“边框”相对的“轮廓”不会在元素布局中占用额外空间。