javascript - 如何使类(class)在点击事件上处于事件状态

Question

我有一个可以在悬停时更改背景颜色的功能，效果很好。但是，我需要做的是保留悬停功能，但还要使该类在单击事件上处于事件状态。

我无法找到解决方案，如果您能提供帮助，我将不胜感激。谢谢

PS:如果有帮助，我有可用的 Bootstrap 。

$(function() {
  $(".SentmsgHdr").hover(function() {
    $(this).css("background-color", "#f1f0ee");
  }, function() {
    $(this).css("background-color", "#fcfaf7");
  });
});

$(function() {
  $(document).on('click', '.SentmsgHdr', function() {
    $(this).css('background', 'yellow');
    var sentid = $(this).find(".Sentdynid");
    var id = sentid.attr("id");

    $.ajax({
    type: "POST",
    dataType: "JSON",
    url: "/domain/admin/Sentmsg.php",
    data: { id: id },
    success: function(data) {
          var date = new Date(data.date);
          var newDate = date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear() + '  '+ date.getHours() + ':' + date.getMinutes() +  ':' + date.getSeconds() +'PM';

        $('#Sentdiv').html(
          '<div style="float: left;"><img src="/domain/admin/images/contact.png"></div>' + 
          '<div style="float: left; margin-left: 20px; font-size: 22px; font-weight: bold;">' + data.from + 
          '<br />' + 
          '<span style="font-size: 13px; margin-top: 30px;">' + 'Ticket#: ' + 
          '<span id="Sentticket" style="font-size: 14px; font-weight: normal; color: red;">' + data.ticket + 
          '</span>' + 
          '</span>' +
          '<span style="font-size: 13px; display: block;">' + 'Subject: ' + '<span id="subject" style="font-size: 13px; color: black; font-weight: normal;">' + data.subject + '</span>' + 
          '</span>' + 
          '<span style="font-size: 13px; display: block;">' + 'Date: '+ '<span id="subject" style="font-size: 13px; color: black; font-weight: normal;">' + newDate + '</span>' +  
          '</span>' +
          '</div>' +
          '<div style="width: 79%; margin-top: 20px; float: right; clear: both; font-size: 16px;">' + 
          '<hr style="border: 0.1em solid #ccc7c0; margin-top: -10px;">' + data.message + 
          '</div>' +
          '</div>'
          );
        }
    });
  });
});

Answer 1

您可以向事件元素添加一些 css 类，以将悬停样式与事件样式分开。

这是一个简单的示例。

$('.btn').click(function(ev) {
  $('.btn.active').removeClass('active');
  $(this).addClass('active')
})

nav a {
display: block;
padding: 2rem ;
font-size: 1.1rem;
background-color:#ccc;
text-decoration: none;
text-align: center;
border: solid 1px #fff;
}
nav a:hover {
background-color:green;
color: #fff;
}

nav a.active {
background-color: blue;
color: #fff;
}
nav a.active:hover {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a href="#" class="btn">One</a>
  <a href="#" class="btn">two</a>
  <a href="#" class="btn">three</a>
</nav>