将鼠标悬停在一个元素上会导致其他元素发生变化

Question

因此在我的网站上，我创建了一个功能，当我将鼠标悬停在一个侧面按钮上时，中间树的图像就会发生变化。 您可以在此处查看页面。

动画可以正常运行，但是现在我正在尝试使div中的背景图像具有响应性。 感谢其他jsfiddle ，我能够使用以下CSS来使原始背景图像响应：

#arvore { 
background: url('http://vistacamisa.greenpeace.org.br/wp-content/uploads/2015/09/arvore_011.png'); 
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 92.7%;
}

问题是此CSS不适用于当我将鼠标悬停在按钮上时显示的图像，而我却遇到了如何使其工作的障碍。 任何想法或建议将不胜感激！

我正在使用以下jQuery：

<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
    $('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
    $('#arvore').css({'background':''});
});
})(jQuery)
</script>

我的按钮有一个.arvorehover类，并且带有树图像的div具有ID #arvore。

非常感谢！

Answer 1

使用以下方法在JavaScript中设置悬停背景时：

$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});

…向标签添加了一个样式属性： <div id="arvore" style="background:url(....)"> ，它会覆盖整个CSS background声明，从而将background-size为auto 。 您可以通过仅更改background-image属性来修复当前代码：

<script type="text/javascript">
(function($){
  $('.arvorehover').hover(function(){
    $('#arvore').css({'background-image':'url('+ $(this).attr('target') +')'});
  },function(){
    $('#arvore').css({'background-image':''});
  });
})(jQuery)
</script>

另外，您可以通过在JavaScript中切换类来将样式保留在CSS中：

<script type="text/javascript">
(function($){
  $('.arvorehover').hover(function(){
    $('#arvore').addClass('hover');
  },function(){
    $('#arvore').removeClass('hover')
  });
})(jQuery)
</script>

然后在您的CSS中：

#arvore.hover {
  background-image: url("some-url");
}