Переопределить встроенный стиль при наведении, затем вернуть

Question

У меня есть некоторые div (.worker), у которых есть встроенные стили, сгенерированные через Perl.При наведении курсора я хочу изменить фон, а затем вернуться к сгенерированному Perl стилю.Единственный способ переопределить встроенный стиль .worker - это jQ.css.К сожалению, когда я покидаю .worker, он остается переопределенным значением.Я попытался захватить атрибут стиля и передать его в качестве параметра для обратного вызова .hover, но он не работает.

Perl сгенерировал встроенный стиль: $html .= qq(<div class="worker" style="background:linear-gradient(to bottom right,@{[bgc($_)]},black)">$_</div>);

JQ дляпереопределить (затем вернуться к Perl):

$('.worker').hover(function(){
   var background = $(this)[0].style.background;
   $(this).css('background','#FF9500');
}, function(background){
     $(this).css('background',background);

Это не работает, как я уже говорил, я думаю, потому что var background ограничен первой функцией и теряет область для обратного вызова.

Есть ли способ вернуть исходные встроенные стили после изменения их на .css?

РЕДАКТИРОВАТЬ: Спасибо @Banzay за ответ.Тем не менее, теперь у меня есть связанная проблема.Когда я щелкаю левой / правой кнопкой мыши на рабочем элементе div, я хочу, чтобы фон был белым, а цвет - черным.Но из-за решения .hover (), bgc меняется на белый щелчок, но когда я делаю мышку, он возвращается к фону, созданному Perl.

Код для щелчков:

var NoName = $('#name').val();
  $('.worker').click(function(){
    var boxName = $('#name').val();
    if (boxName != NoName && boxName.match(/\w/)) {
      $(this).html(boxName[0].toUpperCase() + boxName.substring(1)).css({'background':'white','color':'black'}).removeClass('worker').addClass('assigned');         
    }
  });

$('.worker').bind('contextmenu',function(e){
  e.preventDefault();
  $(this).html('-').attr('style','background:white').toggleClass('worker');
});

И код наведения:

$(".worker").hover(function(){
$(this).data('backgr', $(this).attr('style').split(":")[1]);
$(this).attr('style','background:#FF9500');
}, function(){
     $(this).attr('style','background:' + $(this).data('backgr'));
});

Из кода вы можете видеть, что я пытался удалить рабочий класс, добавить другой класс и переключить рабочий класс.Проблема заключается в том, что рабочий класс не удаляется, поэтому, когда я убираю div после щелчка, вызывается .hover (), в результате чего div возвращается к встроенному стилю Perl.

Как удалитьэффект наведения после левого / правого щелчка?

Answer 1

вы можете обойти это, создав дополнительный атрибут для элемента, используя метод .data().Поэтому вам не нужно передавать никакие параметры в функцию обратного вызова

Вот пример:

$("#div1").hover(function(){
    $(this).data('backgr', $(this).attr('style').split(":")[1]);
    $(this).attr('style','background:' + ' linear-gradient(to bottom right,yellow,blue');
}, function(){
    $(this).attr('style','background:' + $(this).data('backgr'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="background: linear-gradient(to bottom right,red,black);">This is a phrase</div>

Answer 2

Я не очень хорошо понимаю, что вы хотите сделать, но если вы хотите изменить стиль при наведении, вы можете сделать это из CSS с помощью селектора, подобного этому .worker:hover { rules}, даже если вы используете jquery, вы могли быдобавьте класс, который меняет стиль, когда при наведении происходит что-то подобное

$(document).ready(function() {
    $('.worker').hover(
        function() {
           $(this).addClass("second_class")
        },
        function(){
           $(this).removeClass("second_class")
        }
    );
});

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