css – having a white flicker when hovering on text that changes background image

Question

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

<script>

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

</script>

<style>
#defaultB{
    background:#000000
    transition: background 0.2s linear;
    }
</style> 

0
myreeee 3 weeks 2021-12-29T13:28:29-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse