Jquery 将鼠标悬停在元素上，在父div上淡入背景

我在全屏div上有一个»元素«。我想将鼠标悬停在»元素«上，并在div»部分«的背景图像中淡入淡出。只显示背景图像没有问题，但我不知道如何添加淡入淡出动画

$function{ $'.element'.hover函数{ $'.section'.css'background-image'，'urlhttps://ih0.redbubble.net/image.87373734.8395/flat，800x800075，t.jpg'； }，功能{ //在鼠标退出时，重置背景 $'.section'.css'background-image'； }; }; .科{ 宽度：400px； 高度：400px； 边框：1px纯黑； 文本对齐：居中； 过渡：1s缓解一切； } .元素{ 利润率最高：45%； 边框：1px纯红； } 盘旋我

---

我已经更新了你的小提琴

您可以单独使用CSS，无需使用jquery。您可以使用a来获得想要的效果

在这种情况下，如果您将子元素悬停在

CSS:

---

另一种快速方法-

   $(function() {
  $('.element').hover(function() {
    var section =  $('.section');
    section.fadeOut(0, function(){
        section.css('background-image', 'url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg)');
        section.children().fadeIn();
        section.fadeIn(1500);
    });
  }, function() {
    // on mouseout, reset the background
    $('.section').css('background-image', '');
  });
});

---

可能是重复的谢谢你，但那不是我想要的。我想将鼠标悬停在div».element«上，并在div».section«的背景中淡出

   $(function() {
  $('.element').hover(function() {
    var section =  $('.section');
    section.fadeOut(0, function(){
        section.css('background-image', 'url(https://ih0.redbubble.net/image.87373734.8395/flat,800x800,075,t.jpg)');
        section.children().fadeIn();
        section.fadeIn(1500);
    });
  }, function() {
    // on mouseout, reset the background
    $('.section').css('background-image', '');
  });
});