css边框颜色与背景相同，但我希望它在鼠标悬停时改变答案

【问题标题】：css border color stay the same as background, but I want it to change when mouse hoveringcss边框颜色与背景相同，但我希望它在鼠标悬停时改变
【发布时间】：2014-09-25 06:24:51
【问题描述】：

我有一张桌子。最初，边框是白色的，每个单元格都有不同的背景颜色。我有一个名为 highlight 的 css 类，addClass("highlight") 将被解雇。

亮点类：

table tr.highlight{
    height: 80px;
    border-top: 5px solid #FFFFFF;
    border-bottom: 5px solid #FFFFFF
}

为方便起见，我只复制了部分 html 和 JS 到 JSFiddle，但保留了所有的 CSS，所以如果它们看起来不相关，请忽略一些 css。

JS：

$(document).ready(function(){

    $("table tr").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight")

    });

});

悬停似乎有效，但现在取消悬停无效。

显然，高度似乎增加了80px，但顶部和底部的边框颜色没有改变。如果它正在改变，那么鼠标悬停的 tr 将会突出。

有人知道为什么吗？

http://jsfiddle.net/matildayipan/buaqnLyb/

【问题讨论】：

我认为这是一个错字而不是removeClss 它的removeClass
简单的印刷错误。检查您的控制台，该方法不存在并且会引发错误。尝试成为开发人员时，必须学习正确的调试。 Here's an excellent write-up using Chrome's developer tools
这可以仅使用 CSS 表 tr.highlight:hover 来完成
@Kartikeya，感谢您指出我的错字，现在可以使用了。但边境问题仍未解决。
是this。你在找什么？

标签： jquery css border mouseover

【解决方案1】：

这可以仅使用 CSS 来完成。

这是更新后的demo

table tr:hover td{ /*Removed highlight class and added :hover*/
    height: 80px;
    border-top: 5px solid red; /*changed the border color*/
    border-bottom: 5px solid red
}

【讨论】：

它正在工作。但是如果我可以将红色应用到边框，为什么不应用白色呢？为什么白色不起作用，但其他颜色不起作用？
@MatildaYiPan 白色工作，但你看不到差异 bcz 背景也是白色
@MatildaYiPan：我在答案中添加了两个演示......检查一下
@Tushar，谢谢指出！白色也可以！那么，我的问题是为什么我们必须包含 TR？
为 tr 提供边框会造成浏览器兼容性问题，因此在 tr 悬停时我们可以针对所有子 td。

【解决方案2】：

使用

 $(this).toggleClass("highlight");

而不是添加和删除类。

或

使用css应该很容易完成

table tr:hover td{
//your style 
}

DEMO HERE

WHITE COLOR DEMO //不推荐 bcz 背景也是白色的

【讨论】：

感谢在上面的答案中指出，我的问题是：为什么我们必须在选择器中包含 TR？最初，我想突出显示 tr，这就是为什么我认为我们只需要 tr 作为选择器。
@MatildaYiPan tr 选择行...！！！当您将鼠标悬停在任何行上时，您需要边框..!!就是这样:) :)

【解决方案3】：

JS 文件中的 $("table tr td") 选择器和 CSS 文件中的 '.highlight' 是需要的更改

看下面的小提琴： http://jsfiddle.net/abhi47/c7ue3gfm/

您还必须在选择参数中包含 td

您可以使用 toggleclass 代替：

$(document).ready(function(){

$("table tr td").hover(function(){
    $(this).toggleClass("highlight");
});
});

简单易行

在此处获取更多信息http://api.jquery.com/toggleclass/

【讨论】：