Seguí un tutorial para cambiar un elemento de fondo o una imagen de columna cuando paso el mouse sobre ciertas columnas. Este es el código funcional que se me ocurrió ("sitio web" sería la URL de mi sitio web), pero hay un parpadeo blanco cada vez que todo parece cargarse... ¿Alguna solución en mente? Gracias
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; }Aparte de hacer las imágenes más pequeñas
¿Puedes quizás también usar el código SECO? Algo como este código no probado
Tenga en cuenta que le di a los objetivos del mouseover una identificación
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>