Question

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

Highlightclass：

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")

    });

});

Hover看起来很有效，但是unhover现在还不能正常工作。

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

有谁知道为什么？

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

Answer 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
}

Answer 2

JS文件中的

$（＆＃34; table tr td＆＃34;）选择器和＆＃39; .highlight＆＃39;在CSS文件中是需要的更改

请看以下小提琴： http://jsfiddle.net/abhi47/c7ue3gfm/

您还必须在选择参数

中包含td

您可以使用toggleclass：

$(document).ready(function(){

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

简单易用

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

Answer 3

使用

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

而不是添加和删除类。

或

应该可以使用css轻松完成

table tr:hover td{ //your style }

DEMO HERE

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

css边框颜色保持与背景相同，但我希望它在鼠标悬停时更改

3 个答案: