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

Posted 2023-05-08

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

【英文标题】：On a CSS hover event can I change another div's styling with fade?

【发布时间】：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', '');
      );
    );

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

【参考方案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 的背景图像。