錶行，突出懸停並改變對點擊

Question

我試圖使用jQuery來處理這兩種情況的顏色。基本上我想要的功能是當你將鼠標懸停在表格上時，表格行會突出顯示，但是當你點擊某行時，表格行會變成比懸停突出顯示更深的顏色。這是代碼我現在有

$("tr").not(':first').hover(
    function() { 
    $(this).css("background", "#FFEFC6"); 
    }, 
    function() { 
    $(this).css("background", ""); 
    } 
); 

$("tr").click(function(e) { 
    $(this).css("background-color", "#ffd659"); 
}); 

我遇到的問題是，當我點擊某一行上，它會變成較深的顏色，但如果我從該行徘徊了，它會恢復透明背景。

Answer 1

使用CSS，也沒有必要使用JavaScript的懸停 所以只需撥動上點擊

$("tbody").on("click", "tr", function(e) {  
 
    $(this) 
 
    .toggleClass("selected") 
 
    .siblings(".selected") 
 
     .removeClass("selected"); 
 
});

table { width: 50% } 
 
tbody tr:hover.selected td, 
 
tbody tr:hover td { 
 
    background-color: #FFEFC6; 
 
    cursor: pointer; 
 
} 
 
tbody tr.selected td { 
 
    background-color: #ffd659; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>a</th> 
 
     <th>b</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>4</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

$("tr").not(':first').hover(
    function() { 
     if(!$(this).hasClass("sel")) 
       $(this).css("background", "#FFEFC6"); 
    }, 
    function() { 
    if(!$(this).hasClass("sel")) 
     $(this).css("background", ""); 
    } 
); 

$("tr").click(function(e) { 
    $(this).css("background-color", "#ffd659"); 
    $(this).addClass("sel"); 
}); 

和你的CSS可以類。

td 
{ 
    width:40px; 

} 

sel 
{ 
background-color:#ffd659 

} 

JS小提琴：http://jsfiddle.net/szup0x8k/9/