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

从代码中，您可以看到我已尝试删除工作类，添加另一个类，并切换工作类。问题是没有删除worker类，所以当我在单击后移动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")
        }
    );
});

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

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

2 个答案: