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，而不是JavaScript，除了应添加类的单击。这是一个例子，见评论：

＆＃13;

// I haven't disallowed repeated clicks here, but they'll be no-ops.
// If you want to disallow them, make the selector ".SentmsgHdr:not(.clicked)".
$(document).on("click", ".SentmsgHdr", function() {
  // Obviously the .text(...) part of this is just for this demo,
  // you probably just want the class part
  $(this).addClass("clicked").text("I have the class and have been clicked");
});

＆＃13;

/* Defines the color for them when not hovered */
.SentmsgHdr {
  background-color: #fcfaf7;
}
/* Defines the color for them when hovered */
.SentmsgHdr:hover {
  background-color: #f1f0ee;
}
/* Defines the color for them when they've been clicked */
.SentmsgHdr.clicked {
  background-color: yellow;
}

＆＃13;

<div>I don't have the class</div>
<div class="SentmsgHdr">I have the class, click me</div>
<div>I don't have the class</div>
<div class="SentmsgHdr">I have the class, click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

Answer 2

您可以将一些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>

Answer 3

试试这个;

或者您可以从css中删除Task.Initial.Hours.Estimate，只需修改背景为active:hover的{{1}}课程

＆＃13;

.SentmsgHdr:hover

＆＃13;

!important

＆＃13;

$(function() {
  /*
  $(".SentmsgHdr").hover(function() {
    $(this).css("background-color", "#fcfaf7");
  }, function() {
    $(this).css("background-color", "#f1f0ee");
  });
  */
});

$(function() {
  $(document).on('click', '.SentmsgHdr', function() {
    //$(this).css('background', 'yellow');
    $(this).addClass('active');
    
    console.log('clicked');
  });
});

＆＃13;

Answer 4

您的主要问题是，悬停样式INSTANTLY会覆盖您的点击事件样式。其他人给出的解决方案应该可以解决您的问题，因为如果您在click事件而不是css上使用类，则悬停样式不会覆盖您的click事件样式。

如何在click事件中激活一个类

4 个答案: