悬停元素时更改背景

Posted 2023-05-08

【中文标题】悬停元素时更改背景

【英文标题】：Changing the background when hovering an element

【发布时间】：2022-01-18 02:11:08

【问题描述】：

我会先说我正在学习 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/

【参考方案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>

【讨论】：

感谢您的解决方案。在这种情况下，当菜单项上不再悬停时，背景将恢复为该列的默认背景。如果我希望它保留上次加载的背景，我该怎么办？我尝试删除最后一个函数，它确实保留了最后一个背景，但它再次加载它。

检查一下，我编辑了我的答案