通过 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 小提琴链接

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;
}

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

Answer 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);
    }
});

希望这会有所帮助。

Answer 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>