表行，突出悬停并改变对点击

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/