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

Hover on one element causes other element to change

本文关键字：元素 其他 变化 一个 悬停 鼠标      更新时间：2023-09-26

所以在我的网站上，我创建了一个功能，当我将鼠标悬停在一个侧面按钮上时，中间的树的图像会发生变化。你可以在这里看到页面。

动画工作正常，但现在我试图使背景图像响应的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。

非常感谢!

当你在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");
}
相关文章：