在悬停时覆盖内联样式然后返回

Question

我有一些 div (.worker) 具有通过 Perl 生成的内联样式。悬停时，我想更改背景，然后恢复为 Perl 生成的样式。覆盖 .worker 的内联样式的唯一方法是使用 jQ.css。不幸的是，当我离开 .worker 时，它仍然是被覆盖的值。我试图捕获style属性并将其作为参数传递给.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 的回答。但是，现在我有一个连接的问题。当我左/右键单击 .worker div 时，我希望背景为白色，黑色。但是由于 .hover() 解决方案，bgc 变为白色 onclick，但当我将鼠标移出时，它又回到 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

我不太了解您想要做什么，但是如果您想在悬停发生时更改样式，您可以使用类似于 .worker:hover { rules} 的选择器从 CSS 中执行此操作，即使您使用的是 jquery，您也可以添加一个类，当悬停发生这样的事情时改变样式

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

当发生悬停时，您将不必覆盖您的工作类的属性，而是应用另一个类