Hay 2 paneles de tarjetas, y me gustaría cambiar la imagen de la tarjeta cuando paso el mouse sobre ella, luego, cuando la dejo, quiero volver a la imagen inicial.
La primera vez que funciona para cada imagen, pero cuando trato de desplazarme por segunda vez, duplica mi cadena donde almaceno la ruta.
CÓDIGO HTML
<div class="col-lg d-flex justify-content-center mb-4"> <div class="card border-0""> <img src="img/slide-1.jpg" class=" card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Image 1</h5> </div> </div> </div> <div class="col-lg d-flex justify-content-center mb-4"> <div class="card border-0""> <img src="img/slide-1.jpg" class=" card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Image 2</h5> </div> </div> </div>CÓDIGO JQUERY
(function ($) { "use strict"; // Start of use strict var image_product; var image_product_path="/Users/paul/Desktop/Site/"; $(".card-img-top").on({ mouseenter: function () { image_product = $(this).attr("src"); $(this).attr("src","/Users/paul/Desktop/Site/img/slide-3.jpg"); }, mouseleave: function () { $(this).attr("src",image_product_path+image_product); } }); })(jQuery); // End of use strict El error que se activa por segunda vez cuando trato de desplazarme sobre las tarjetas: [Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg
El error que se activa por tercera vez cuando trato de desplazarme sobre las tarjetas: [Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg Y ASÍ SIGUE
Esto es lo que contienen el atributo src y la variable image_product en las diferentes fases:
| Fase | origen | imagen_producto |
|---|---|---|
| antes de la primera ejecución | img/slide-1.jpg | undefined |
| primer mouseenter | /Users/paul/Desktop/Site/img/slide-3.jpg | img/slide-1.jpg |
| primera licencia de ratón | /Users/paul/Desktop/Site/img/slide-1.jpg | img/slide-1.jpg |
| 2do mouseenter | /Users/paul/Desktop/Site/img/slide-3.jpg | /Users/paul/Desktop/Site/img/slide-3.jpg |
| 2da licencia de ratón | /Users/paul/Desktop/Site/Users/paul/Desktop/Site/img/slide-1.jpg | /Users/paul/Desktop/Site/img/slide-3.jpg |
En las funciones de sus controladores, sigue almacenando todo lo que está en src en image_product cuando ingresa el mouse.
La segunda vez que ingresa con el mouse, image_product ya contiene la ruta completa, pero en su función mouseleave sigue anteponiendo la ruta cada vez.
Hay n paneles de tarjetas, y me gustaría cambiar la imagen de la tarjeta cuando paso el mouse sobre ella, luego, cuando la dejo, quiero volver a la imagen inicial.
Establezca la imagen original en un atributo de datos, luego, al sacar el mouse, vuelva a cambiarla.
(function($) { $(".card-img-top").on({ mouseenter: function() { $(this).data('original', $(this).attr("src")); $(this).attr("src", "https://via.placeholder.com/300/09f/000.png"); }, mouseleave: function() { $(this).attr("src", $(this).data('original')); } }); })(jQuery); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg d-flex justify-content-center mb-4"> <div class="card border-0"> <img src="https://via.placeholder.com/300/09f/fff.png" class=" card-img-top " alt="... "> <div class="card-body "> <h5 class="card-title ">Image 1</h5> </div> </div> </div>Si desea una imagen diferente para cada tarjeta diferente, configúrela en un atributo de datos.
(function($) { $(".card-img-top").on({ mouseenter: function() { $(this).data('original', $(this).attr("src")); $(this).attr("src", $(this).data('hover-image')); }, mouseleave: function() { $(this).attr("src", $(this).data('original')); } }); })(jQuery); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg d-flex justify-content-center mb-4"> <div class="card border-0"> <img src="https://via.placeholder.com/100/09f/fff.png" data-hover-image="https://via.placeholder.com/100/09f/000.png" class=" card-img-top " alt="... "> <div class="card-body "> <h5 class="card-title ">Image 1</h5> </div> </div> </div> <div class="col-lg d-flex justify-content-center mb-4"> <div class="card border-0"> <img src="https://via.placeholder.com/100/07f/aaa.png" data-hover-image="https://via.placeholder.com/100/05f/333.png" class=" card-img-top " alt="... "> <div class="card-body "> <h5 class="card-title ">Image 2</h5> </div> </div> </div>Consulte un enlace https://stackoverflow.com/a/18032363/3526623
La solución del enlace de arriba sin Jquery
function hover(element) { element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff'); } function unhover(element) { element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff'); } <img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />