Keep: цвет при наведении мыши при помощи Jquery - PullRequest
Новая
       35

Keep: цвет при наведении мыши при помощи Jquery

3 голосов
/ 23 февраля 2012

То, чего я хочу добиться, - это когда пользователи нажимают на ссылку, чтобы кнопка была нажата, чтобы сохранить цвет и не исчезать при выходе мыши из состояния наведения.

Если возможно, только одна кнопка получает цвет щелчка за раз.

Любая помощь приветствуется!Внизу есть ссылка на 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/

Ответы [ 3 ]

2 голосов
/ 23 февраля 2012

Изменение вашего кода, как показано ниже, должно работать.

В вашем коде вы перезаписываете цвет фона при настройке анимированного наведения.

Все, что вам нужно сделать, это установить флаг, чтобы этого не произошло. Когда элемент щелкается, я добавляю класс, чтобы установить его стиль, он также действует как флаг, чтобы гарантировать, что цвет не меняется при наведении. 

$('.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;
}

1011 *

Обновленная скрипка: http://jsfiddle.net/wNTs7/23/

1 голос
/ 23 февраля 2012

См. Эту версию для одного способа сделать это:

Это также решает проблему анимации «перезаписи» заданного вами цвета.

Вот пример кода - при необходимости измените: 

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

Надеюсь, это поможет.

0 голосов
/ 09 декабря 2017

Эта версия для наведения мышки:

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