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 Link

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

你需要拥有

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

保持：通过Jquery点击鼠标悬停颜色

3 个答案: