懸停在jQuery和CSS上

我的目標是，如果當它懸停時，並且單元格已處於活動狀態，懸停將爲黑色（用於停用），如果它仍然處於非活動狀態（用於激活），則爲橙色。懸停在jQuery和CSS上

但是用我的代碼，每次我將它懸停在td上時，顏色都不會返回到之前的背景顏色。（即使老鼠離開仍然是橙色或黑色）我應該使用什麼事件？

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

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

來源

2014-03-05 Mel Sy Gallosa

我認爲問題是與條件單元格==「」。最好檢查.length來查看是否有東西，因爲如果它爲空，檢查==「」將不起作用。另外，嘗試使用.mouseover（）而不是.hover（） – frenchie

任何不使用'：hover'的理由忘記JS？ – Mooseman

懸停方法使用mouseleave事件使用mouseenter事件，該函數需要2個參數，in（鼠標輸入）和out（鼠標離開）。您應該在每個事件中更改元素的狀態。 – Loenix

而不是檢查空值，這是更好地檢查內容

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

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

來源

2014-03-05 20:57:49

嘗試建立和切換類的長度，這將幫助你恢復到默認狀態。

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

來源

2014-03-05 20:57:58 Mark

使用mouseenter()和mouseleave()，而不是hover()。

來源

2014-03-05 20:58:08 macsj200

懸停使用處理程序和處理程序出。 2功能用逗號分隔hover()

我會用類，針對突出

.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"); 
    } 
});

來源

2014-03-05 21:00:11 mathius1

我可以優化您的代碼嗎？：'$（「td」）。hover（function（）{ var cell = $（this）.html（）; $（this）.toggleClass（cell ==「」？「orange」：「black」） ; }）;' –

.hover()是用於切換一個偉大的功能，但在你的情況下，你最好通過分開鼠標離開並輸入：

$('td').on({ 
    mouseenter : function(){ 
     var cell = $(this).html(); 

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

來源

2014-03-05 21:01:24

當你調用$(this).css("background-color", "orange");或類似的命令時，會發生什麼情況，你正在更改CSS，它會保持這種狀態，直到你要求再次更改它。

當你只通過一個參數hover時，它會在你同時進入和離開時運行相同的參數，但是如果你傳入第二個參數，那麼第一個將被調用enter，第二個用於leave。

$("td").hover(function(){ 
    //Put original code here 
}, function(){ 
    $(this).css("background-color", /* Whatever the original color was */); 
});

來源

2014-03-05 21:01:32 SCB

懸停在jQuery和CSS上

回答

相關問題