在鼠标悬停时添加边框答案

【问题标题】：Add border on mouseover在鼠标悬停时添加边框
【发布时间】：2009-06-04 05:55:58
【问题描述】：

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

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

【问题讨论】：

【解决方案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; }

【讨论】：

我会缓存“this”，因为您只选择一个表。无需在 jQuery 对象中重新打包该表两次。还;我会使用 mouseover/mouseout 事件而不是悬停功能。它有点冗长，而且我发现悬停功能有时有点古怪。
var that = $("#tableid"); that.mouseover(function () {}); that.mouseout(function () {}); ... 是的。您可以链接鼠标悬停和鼠标悬停。但我喜欢冗长:)
@roosteronacid：hover() 事件应该可以解决 mouseenter/mouseleave 的很多问题（根据 jQuery 人员的说法）。关于缓存：在这个例子中它只是一个表，但这只是一个例子。在现实生活中你会选择多个表，所以缓存“this”不是一个选项
抱歉 roosteronacid，我是新手，我想知道“var that”在做什么
@activa：也许他们已经解决了我遇到的问题（延迟事件触发和多个连锁事件）。我已经有一段时间没有使用 hover() 了。就缓存而言；你说得对。我想我将其视为一种使命，对此类事情发表评论。我看到很多人没有“负责任地”使用 jQuery。据我所知；你不是他们中的一员:)

【解决方案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;
}

这将是最好/最简单/可扩展的方法！

【讨论】：

【解决方案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");
    });

【讨论】：

我知道的愚蠢问题，但这是否在标签之间进行
投了反对票。过度使用选择器。在大量 dom 节点上性能下降。

【解决方案4】：

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

【讨论】：