悬停元素时更改背景

Question

I will preface this by saying that I am learning Javascript and Jquery. I'm trying to make a minus that when the mouse hovers over an element, it changes the background image in the next column.

For now I managed to compose the function and I wanted to insert also an animation when the image changes.

The problem I'm having is passing the mouse from one menu item to another. The transition does not apply. I've probably already identified the problem: the part of the function that restores the background when the mouse leaves the item.

I can't find a solution, though.

Here is the code written so far:

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

I think that your rather use data attribute to store the background url in your element. Like this, you can get it easily with jQuery later in your script.

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

You can use selector starting with specific name like $("[class^='item-']") .

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

To make effect changing the background, you can use a call back to be sure to change the background url when animation is done.

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>