所以在我的网站上我创建了一个功能,当我将鼠标悬停在其中一个侧面按钮上时,中间的树的图像会发生变化。可以看到页面here.
动画工作正常,但现在我试图让背景图像在 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");
}
关于javascript - 将鼠标悬停在一个元素上会导致其他元素发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32597830/