在悬停时重写内联样式，然后返回
我有一些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的回答。然而，现在我有了一个相关的问题。当我用鼠标左键/右键单击.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类，添加另一个类，并切换worker类。问题是worker类没有被删除，所以当我在单击之后移出div时，会调用.hover()，导致div恢复为Perl内联样式。
单击鼠标左键/右键后，如何解除悬停效果？
回答 2
Stack Overflow用户
发布于 2018-06-04 03:48:38
您可以通过使用.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>
Stack Overflow用户
发布于 2018-06-04 02:55:25
我不太明白您想要做什么，但是如果您想要在悬停时更改样式，您可以在CSS中使用类似于此.worker:hover { rules}的选择器进行更改，即使您使用的是jquery，您也可以添加一个在悬停时更改样式的类，如下所示
$(document).ready(function() {
$('.worker').hover(
function() {
$(this).addClass("second_class")
},
function(){
$(this).removeClass("second_class")
}
);
});这样，当悬停发生时，您将不必覆盖worker类的属性，而是应用另一个类
https://stackoverflow.com/questions/50669615
复制相似问题