I followed a tutorial to change a background elementor column image when i hover on certain columns. This is the functional code i came up with ( "website" would be my website url), but there is a white flicker everytime everything seems to load... Any fix in mind? Thank you
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.littletravA').mouseenter(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0004_MENU_IMG_LTR_001.jpg)');
});
$('.littletravA').mouseleave(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
});
$('.bestA').mouseenter(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0005_MENU_IMG_BB_001.jpg)');
});
$('.bestA').mouseleave(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
});
$('.audreyA').mouseenter(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0000_MENU_IMG_AS_001.jpg)');
});
$('.audreyA').mouseleave(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
});
$('.MLA').mouseenter(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0003_MENU_IMG_ML_001.jpg)');
});
$('.MLA').mouseleave(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
});
$('.stribeA').mouseenter(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0001_MENU_IMG_STRIBE_001.jpg)');
});
$('.stribeA').mouseleave(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
});
$('.aztecA').mouseenter(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0002_MENU_IMG_PYI_001.jpg)');
});
$('.aztecA').mouseleave(function() {
$('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
});
});
});
#defaultB {
background: #000000 transition: background 0.2s linear;
}
Apart from making the images smaller
Can you perhaps also use DRY code - something like this untested code
Note I gave the mouseover targets an ID
const folder = 'https://via.placeholder.com/300x300?text='; // 'website/wp-content/uploads';
const def = '/2021/11/0006_MENU_IMG_DEFAULT_001.jpg';
const $defaultB = $("#defaultB");
const images = {
"littletravA": "/2021/11/0004_MENU_IMG_LTR_001.jpg",
"bestA": "/2021/11/0005_MENU_IMG_BB_001.jpg",
"audreyA": "/2021/11/0000_MENU_IMG_AS_001.jpg",
"MLA": "/2021/11/0003_MENU_IMG_ML_001.jpg",
"stribeA": "/2021/11/0001_MENU_IMG_STRIBE_001.jpg",
"aztecA": "/2021/11/0002_MENU_IMG_PYI_001.jpg"
}
$(function() {
$(".upload").on({
mouseenter: function() {
$("#defaultB").css("background-image", `url(${folder + images[this.id]})`);
},
mouseleave: function() {
$defaultB.css("background-image", `url(${folder + def})`);
}
});
});
document.getElementById("thumbs").innerHTML = Object
.entries(images).map(([key, src]) => `<img class="upload" id="${key}" src="${folder+src}" />`)
.join('')#defaultB {
border: 1px solid black;
height: 300px;
width: 300px;
background-image : url(https://via.placeholder.com/300x300?text=/2021/11/0006_MENU_IMG_DEFAULT_001.jpg);
}
#thumbs img {
height: 50px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="defaultB">Hello</div>
<div id="thumbs"></div>