在鼠标悬停上添加边框

问题描述：

我希望将表格边框（可以使用CSS设置，而不是内联边框=属性）设置为边框：1px纯黑色;当我将鼠标悬停在桌面上时。在鼠标悬停上添加边框

我该如何在jQuery中做到这一点。我认为它与本页顶部的按钮（问题，标签，用户等）发生的情况相同，只不过它是背景颜色变化的div，而我想更改表格的边框。但是这个概念是一样的。

答

对于悬停效果，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; }

答

看看这篇文章mouseenter and mouseleave events。

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

我知道这个愚蠢的问题，但是这是否介于标签 – Ankur 2009-06-04 06:07:09

已投票。选择器过度使用。在一大群DOM节点上性能下降。 – roosteronacid 2009-06-04 06:11:09

答

它可以更好地在桌子上交换类，而不是直接编辑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; 
}

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

答

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

在鼠标悬停上添加边框

相关推荐