Mi objetivo es el siguiente:
Tengo varios elementos div (clase = padre) que contendrán imágenes. Las imágenes solo deben ser visibles cuando el usuario coloca el cursor del mouse en el elemento div respectivo. Además, quiero ampliar la imagen cuando el cursor del mouse está en el div y la imagen es visible.
Mi idea era crear un elemento secundario en el elemento div respectivo. En mouseenter, el elemento secundario está configurado para mostrar = 'ninguno'. En mouseleave, el elemento secundario se establece en display = 'block.
Lo que quiero lograr es que el usuario solo pueda ver el padre-div cuando posicionó el cursor del mouse en el elemento respectivo. En el siguiente código, el div principal es verde mientras que el div secundario es gris. Entonces, cuando el usuario mueve el mouse sobre uno de los elementos, el div secundario gris debería desaparecer y el div principal debería volverse visible. Por lo tanto, el color de un elemento en este código específico debe cambiar de gris a verde cuando el usuario coloca su mouse en el elemento.
Supongo que cometí un error muy básico.
Gracias por tu ayuda.
$('#child_1').mouseenter(function(event) { let target = event.target; target.style.display = 'none'; }) .mouseleave(function(event) { let target = event.target; target.style.display = 'block' }); $('#child_2').mouseenter(function(event) { let target = event.target; target.style.display = 'none'; }) .mouseleave(function(event) { let target = event.target; target.style.display = 'block' }); $(document).ready(function() { $("[id^=parent]").hover(function() { $(this).addClass('transition'); }, function() { $(this).removeClass('transition'); }); }); .transition { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .child { background: grey; width: 100%; height: 100%; position: absolute; box-shadow: inset 0 0 20px #fff; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; } .parent { background: darkolivegreen; width: 300px; height: 424px; position: relative; float: left; margin: 30px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent_1" class="parent"> <div id="child_1" class="child"></div> </div> <div id="parent_2" class="parent"> <div id="child_2" class="child"></div> </div>Acabo de crear este CodePen . ¿Es esto lo que estás buscando?
He simplificado su JavaScript para que solo agregue/elimine una clase 'activa' cuando pasa el mouse sobre un div principal:
$('.img-wrapper').mouseenter(function(event) { $(this).addClass('active'); }) $('.img-wrapper').mouseleave(function(event) { $(this).removeClass('active'); });La animación se trata en el css:
.img-wrapper { overflow: hidden; background: lightblue; width: 300px; height: 300px; position: relative; margin: 0 10px; } .img-wrapper img { opacity: 1; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: all .4s ease-in-out; } .img-wrapper.active img { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }