Tengo un conocimiento limitado de js/jquery y me cuesta entender por qué no puedo hacer que la siguiente configuración funcione en un sitio web en vivo; la segunda imagen no alterna allí.
Funciona en Fiddle aunque: https://jsfiddle.net/05vkw2mj/2/
#HTML
<div id="rodrigo"> RODRIGO <img src="https://ywamsantiago.com/wp-content/uploads/2020/04/MG_1218-Rodrigo-Oliveira-copy-web-ready-500x500.jpg" id="rodrigo-img"/></div> <div id="bob"> BOB <img src="https://ywamsantiago.com/wp-content/uploads/2020/04/MG_1218-Rodrigo-Oliveira-copy-web-ready-500x500.jpg" id="bob-img"/></div>#JQUERY
$(document).ready(function() { $("#rodrigo").hover(function() { $("#rodrigo-img").toggle(); }); $("#bob").hover(function() { $("#bob-img").toggle(); }) });#CSS
body { padding-top:400px; } #rodrigo { position: relative; } #rodrigo-img { display: none; position: absolute; bottom: 25px; left:0; width: 350px; max-width: 100%; } #bob { position: relative; } #bob-img { display: none; position: absolute; bottom: 25px; left:0; width: 350px; max-width: 100%; }Creo que esto puede ser un poco más fácil de seguir.
$(document).ready(function() { $(".links").hover(function(e) { $($(e.target).data().img).toggle(); }); }); .img-container { position: relative; width: 150px; height: 150px; overflow: hidden; } .img-container img { position: absolute; display: none; } .links { display: inline-block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="img-container"> <img src="https://picsum.photos/id/1020/300" id="rodrigo-img" /> <img src="https://picsum.photos/id/1/300" id="bob-img" /> </div> <div id="rodrigo" class="links" data-img="#rodrigo-img"> RODRIGO </div> <div id="bob" class="links" data-img="#bob-img"> BOB </div>