jquery - 保留:hover color on mouse click via Jquery

Question

我想要实现的是，当用户单击链接时，单击的按钮保持颜色，并且当鼠标移出悬停状态时不会淡出。

如果可能的话，一次只有一个按钮接收点击颜色。

感谢任何帮助!底部有一个 JS Fiddle 的链接。

HTML

<ul>
<li><a href="#" class="slide">1</a></li>
<li><a href="#" class="slide">2</a></li>
<li><a href="#" class="slide">3</a></li>
<li><a href="#" class="slide">4</a></li>
</ul>​

CSS

.slide {
  padding:20px 20px 20px 20px;
  margin:20px;
  background-color:#999; 
 }

ul li {
  float:left;          
 }

Jquery

$('.slide').click(function() {
    $(this).css("background-color", "#f09");
});

$('.slide').hover(function() {


    $(this).animate({
        backgroundColor: '#000'
    }, 300);

}, function() {
    $(this).animate({
        backgroundColor: '#999'
    }, 200);

});​

JS fiddle 链接

http://jsfiddle.net/coltanious/wNTs7/9/

Answer 1

像下面这样更改代码应该可行。

在您的代码中，当您设置动画悬停时，您将覆盖背景颜色。

您所需要做的就是设置一个标志，以确保这种情况不会发生。单击该元素时，我添加一个类来设置其样式，这也充当标志以确保悬停时颜色不会改变。

$('.slide').click(function() {
   $(".slide").each(function(i,elem) { // clear the style first
     $(elem).removeClass("clicked");
   });//so only ONE element is coloured SELECTED
   $(this).addClass("clicked");//add the "selected" colour
});

$('.slide').hover(
   function() {
    if(!$(this).hasClass("clicked")) //check flag
    {//then hover
     $(this).animate({
         backgroundColor: '#000'
     }, 300);
    }
   }, 
  function() {
   if(!$(this).hasClass("clicked")) {
     $(this).animate({
         backgroundColor: '#999'
     }, 200);
     }
    }
);​

你的CSS需要有

.clicked
{//set !important on the style so it overrides the .slide bg colour
    background-color:#f09 !important;
}

​

更新的 fiddle :http://jsfiddle.net/wNTs7/23/