после hover() возвращать прежнее значение backgroundColor

295
24 ноября 2017, 06:11

Задача такая при наведении на элемент менять его backgroundColor, после того как отводишь мышку, должно возвращаться старое значение backgroundColor. 

$('td').hover(
function(){
  var a = $(this).prop('style');
  $(this).css('backgroundColor', 'navy');
},
 function(){
  $(this).css('backgroundColor', a.backgroundColor);
});

У меня не возвращает прежний цвет. В переменную сразу записывается цвет на который был изменен.

Answer 1

У вас а - локальная переменная. Логично, что другая функция о ней ничего не знает. Сохраняйте значение в сам элемент, при помощи метода data()

jQuery(document).ready(function($) { 
  $('div').hover( 
    function() { 
      var el = $(this); 
      el.data({color: el.css('backgroundColor')}) 
        .css('backgroundColor', 'navy'); 
    }, 
    function() { 
      var el = $(this); 
      el.css('backgroundColor', el.data('color')); 
    } 
  ); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div>Div1</div> 
<div>Div2</div>

Но решение через псевдокласс CSS :hover значительно лучше

Answer 2

Это на CSS делается, с помощью псевдокласса hover

const originalBackgorund = js.style.backgroundColor; 
js.onmouseover = e => e.target.style.backgroundColor = 'green'; 
js.onmouseout = e => e.target.style.backgroundColor = originalBackgorund;
div{ 
  width: 100px; 
  height: 100px; 
  background-color: black; 
} 
div:hover{ 
  background-color: red; 
}
<div></div> 
<div id=js></div>

READ ALSO
Модальное окно по клику на button
jQuery

Модальное окно по клику на button

Есть кнопка отправки формы buttonПо клику на нее в конце должно появляться модальное окно

 323
Проблема с animation css
jQuery

Проблема с animation css

Здравствуйте! Сделал анимации, работают, но после окончания анимации, элемент возвращается на стартовую позицию ( 0% )Вопрос: как сделать так,...

 267
awk - вывести все совпадения в строке
HTML

awk - вывести все совпадения в строке

Есть такая строка:

 262
Автозаполняемое поле в форме
HTML

Автозаполняемое поле в форме

Мне нужно сделать поле, которое динамически предлагает возможные варианты при вводеНашел flexdatalist, и все бы ничего, только не могу предварительно...

 374