悬停元素时更改背景

Question

我会先说我正在学习 Javascript 和 Jquery。 我试图做一个减号，当鼠标悬停在一个元素上时，它会改变下一列中的背景图像。

现在我设法编写了这个函数，并且我还想在图像发生变化时插入一个动画。

我遇到的问题是将鼠标从一个菜单项传递到另一个菜单项。过渡不适用。我可能已经发现了问题：当鼠标离开项目时恢复背景的函数部分。

不过，我找不到解决方案。

这是目前编写的代码：

$(function() {
  $('.item-1').hover(function() {
    $('.col-img').css('background-image', 'url(https://i1.wp.com/www.giacomocusano.com/wp-content/uploads/2016/07/coastal-wash-web.jpg?fit=1024%2C682&ssl=1)');
  
  });
});
$(function() {
  $('.item-2').hover(function() {
    $('.col-img').css('background-image', 'url(https://www.chedonna.it/wp-content/uploads/2018/11/documentari.jpg');
  
  });
});
$(function() {
  $('.item-3').hover(function() {
    $('.col-img').css('background-image', 'url(https://www.artemedialab.it/wp-content/uploads/2019/04/immagini-sfondo-1-700x400.jpg');
  
  });
});
$(function() {
  $('.item-4').hover(function() {
    $('.col-img').css('background-image', 'url(https://www.radiomontecarlo.net/resizer/1200/720/true/cosmo-1592899369678.jpg--una_meravigliosa_farfalla_cosmica_si_aggira_nello_spazio__le_immagini_sono_mozzafiato.jpg?1592899369000');
  
  });
});

.dropdown-menu{
  display:flex;
  align-items:center;
  height:100vh;
}
.col{
  width:50%;
  padding: 20vw 10vw;
}
.col-img{
  background-image: url(https://www.chimerarevo.com/wp-content/uploads/2020/04/immagini-gratis.jpg);
  height:100vh;
  transition: background 0.5s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-menu">
<div class="col col-img">
  Col img
</div>
<div class="col col-menu">
<ul>
<li><a href="#" class="item-1">Item 1</a></li>
<li><a href="#" class="item-2">Item 2</a></li>
<li><a href="#" class="item-3">Item 3</a></li>
<li><a href="#" class="item-4">Item 4</a></li>

</ul>
</div>
</div>

http://jsfiddle.net/ahL3kd7w/

Answer 1

我认为您宁愿使用 data 属性将背景 url 存储在您的元素中。像这样，您可以稍后在脚本中使用 jQuery 轻松获得它。

https://api.jquery.com/data/

您可以使用以特定名称开头的选择器，例如 $("[class^='item-']")。

https://api.jquery.com/attribute-starts-with-selector/

为了使改变背景生效，你可以使用回调来确保在动画完成时改变背景url。

https://api.jquery.com/fadeout/

$(function() {
  $("[class^='item-']").hover(function() {
    let bgURL = $(this).data("imgurl");
    
    // debug infos
    //console.clear();
    //console.log(bgURL);
    
    $('.col-img').fadeOut("fast", function() {
      // Animation complete
      $('.col-img').css('background-image', 'url(' + bgURL + ')').fadeIn("fast");
    });
  });
});

.dropdown-menu{
  display:flex;
  align-items:center;
  height:100vh;
}
.col{
  width:50%;
  padding: 20vw 10vw;
}
.col-img{
  background-image: url(https://www.chimerarevo.com/wp-content/uploads/2020/04/immagini-gratis.jpg);
  height:100vh;
  transition: background 0.5s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-menu">
<div class="col col-img">
  Col img
</div>
<div class="col col-menu">
<ul>
<li><a href="#" class="item-1" data-imgurl="https://i1.wp.com/www.giacomocusano.com/wp-content/uploads/2016/07/coastal-wash-web.jpg?fit=1024%2C682&ssl=1">Item 1</a></li>
<li><a href="#" class="item-2" data-imgurl="https://www.chedonna.it/wp-content/uploads/2018/11/documentari.jpg">Item 2</a></li>
<li><a href="#" class="item-3" data-imgurl="https://www.artemedialab.it/wp-content/uploads/2019/04/immagini-sfondo-1-700x400.jpg">Item 3</a></li>
<li><a href="#" class="item-4" data-imgurl="https://www.radiomontecarlo.net/resizer/1200/720/true/cosmo-1592899369678.jpg--una_meravigliosa_farfalla_cosmica_si_aggira_nello_spazio__le_immagini_sono_mozzafiato.jpg?1592899369000">Item 4</a></li>

</ul>
</div>
</div>