通过 Jquery 保持：鼠标单击时的悬停颜色答案

【问题标题】：Keep :hover color on mouse click via Jquery通过 Jquery 保持：鼠标单击时的悬停颜色
【发布时间】：2012-03-13 12:00:47
【问题描述】：

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

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

感谢任何帮助！底部有 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 小提琴链接

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

【问题讨论】：

标签： jquery colors click hover jquery-animate

【解决方案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;
}

更新小提琴：http://jsfiddle.net/wNTs7/23/

【讨论】：

感谢吉迪恩！非常有帮助。当我写这篇文章时，我忘了提到是否有办法让它只有一个按钮变成点击的颜色。感谢您的帮助。
嗨，吉迪恩，再次感谢。所以，你列出的元素对我来说有点新，我对 jquery 有点新。我怎样才能更多地了解这些元素以及何时使用它们？谢谢！ $('.slide').click(function() { $(".slide").each(function(i,elem) { $(elem).removeClass("clicked"); }); $(this) .addClass("clicked"); });
@user977842 jquery.each 接受一个函数，它的第一个参数是索引(i)，第二个是元素(elem)。循环遍历所有元素并删除样式，然后将单击的类添加到单击的当前元素。

【解决方案2】：

查看此版本了解一种方法：

http://jsfiddle.net/wNTs7/19/

这也解决了动画“覆盖”你设置的颜色的问题。

这是示例代码 - 根据需要进行更改：

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

$('.slide').click(function() {
    setColor.call(this);    
    $(this).attr('stay-like-this', 'yes');
});

$('.slide').hover(function() {
    if($(this).attr('stay-like-this') != 'yes') {
        $(this).animate({
            backgroundColor: '#000'
        }, 300, 'swing', setColor);
    }
}, function() {
    if($(this).attr('stay-like-this') != 'yes') {
        $(this).animate({
            backgroundColor: '#999'
        }, 200, 'swing', setColor);
    }
});

希望这会有所帮助。

【讨论】：

【解决方案3】：

此版本适用于鼠标悬停：

http://jsfiddle.net/L2hy67ga/1/

JS：

    $('.line1 ul li > a').mouseover(function() { 
       $(this).attr('keephover','yes'); 
       $('.line1 li > a').each(function(){  
          if($(this).attr('keephover')=='yes'){
              $(this).css('background-color', '#3399CC');
          } else {
              $(this).css('background-color', '#fff');
          }
          $(this).attr('keephover','');         
       });
    });

HTML：

<div class="col-md-3 col-sm-3 line1">
<ul><li>
<a href="/a">URL A</a>
</li><li>
<a href="/b">URL A</a>
</li><li>
<a href="/c">URL C</a>
</li><li>
<a href="/d">URL D</a>
</li>                                                
</ul>
</div>

【讨论】：