Question

我希望将一个表格边框（我可以使用css设置，而不是内联border =属性）设置为border：1px solid black;当我把鼠标移到桌子上时。

我如何在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");
    });

Answer 4

或者，＆＃34;概述＆＃34;而不是＆＃34; border＆＃34;不会占用元素布局中的额外空间。

鼠标悬停时添加边框

4 个答案: