悬停在JQuery和CSS上

Question

我的目标是，如果在悬浮时，如果单元格已经处于活动状态，则悬浮的TD将是黑色的(用于失活)，而对于仍然不活跃的单元格，则为橙色(用于激活)。

但是使用我的代码，每次我将它悬停在td上时，颜色就不会返回原来的背景色。(仍然是橙色或黑色，甚至鼠标离开)我应该使用什么事件？

$("td").hover(function(){
    var cell = $(this).html();

    if(cell == "")
        $(this).css( "background-color", "orange");
    else
        $(this).css( "background-color", "black");
});

Answer 1

与其检查空值，不如检查内容的长度

$("td").hover(function(){
    var cell = $(this).html();

    if(cell.length===0)
        $(this).css( "background-color", "orange");
    else
        $(this).css( "background-color", "black");
});

Answer 2

悬停使用处理程序入和处理程序退出。用逗号悬停分隔的两个函数

我会使用类来突出显示。

.orange {
background: none no-repeat 0 0 orange;
}
.black{
background: none no-repeat 0 0 black;
}

然后使用addClass和removeClass

$("td").hover(
    function(){
        var cell = $(this).html();
        if(cell == "") {
            $(this).addClass("orange");
        } else {
            $(this).addClass("black");
        }
    },
    function () {
            $(this).removeClass("orange").removeClass("black");
    }
});

Answer 3

尝试创建和切换一个类，这将帮助您返回默认状态。

<Style>
.active {background-color:black;}
.inactive {background-color:orange;}
</style>

<script>
$("td").hover(function(){
var cell = $(this).html();

if(cell == ""){
    $(this).toggleClass("active");
}
else{
     $(this).toggleClass("inactive");
}
});

​