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

【问题标题】：On a CSS hover event can I change another div's styling with fade?在 CSS 悬停事件中，我可以使用淡入淡出更改另一个 div 的样式吗？
【发布时间】：2016-01-09 14:57:37
【问题描述】：

我在这样的按钮悬停时查看背景图像：

    $(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', '');
      });
    });

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

【问题讨论】：

标签： css image background hover fade

【解决方案1】：

你可以使用：

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

【讨论】：

$(function() { $('#safety').hover(function() { $('.contenitoreindex').fadeout("slow", function() { $(this) .css('background', 'url(immagini/safetyindex.jpg) no-repeat center center'); }); }, function() { // 鼠标移出时，重置背景颜色 $('.contenitoreindex'). css('背景', ''); }); });

【解决方案2】：

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

但是你可以为元素的不透明度设置动画吗？使其淡入。（所有文本和其他内容）

$(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>

【讨论】：

我希望动画在 Hover 上，而不是在 MouseOut 上。（对不起我的英语）
您希望图像淡入视野吗？

【解决方案3】：

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

【讨论】：