Changing the background when hovering an element

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;
}




  Col img



Item 1
Item 2
Item 3
Item 4

http://jsfiddle.net/ahL3kd7w/

user_401278 · Answer

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;
}




  Col img



Item 1
Item 2
Item 3
Item 4

Changing the background when hovering an element

1 Answers