Question

我在悬停按钮时看到背景图片，如下所示：

    $(function() {
      $('#a').hover(function() {
        $('.conte`enter code here`nitoreindex').css('background', 'url(immagini/img1.jpg) no-repeat center center');
      }, function() {
        // on mouseout, reset the background colour
        $('.contenitoreindex').css('background', '');
      });
    });

没有办法用缓慢的淡入淡出第二个元素的颜色？谢谢！

Answer 1

您可以使用：

$('.contenitoreindex').fadeout("slow", function() {
    // Animation complete.
    $(this).css('background', '');
})

Answer 2

css属性背景是设置背景图像的简写这很难制作动画，因为那时你必须放入另一张图像。

但你可以为元素的不透明度设置动画吗？因此它会淡入。（所有文字和其他内容）

$(document).ready(function() {
  $('#a').hover(function() {
    $('#b').css('background', 'url(http://lorempixel.com/400/200/) no-repeat center center');
    $('#b').animate({
      'opacity': '1'
    });
  });
});

#a {
  height: 50px;
}
#b {
  border: 1px solid black;
  height: 300px;
  width: 300px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="a">hover
</span>
<div id="b"></div>

Answer 3

我几乎希望将鼠标悬停在按钮上以更改容器div的背景图像。

在CSS悬停事件中，我可以使用淡入淡出更改另一个div的样式吗？

3 个答案: