Estoy atascado en una propiedad jquery. Quiero hacer un efecto de sobre con la propiedad mouse enter y mouse sale pero tengo varias imágenes y me gustaría hacerlo solo en 1 cuando el mouse ingresa en esta.
Traté de poner varios nombres de clase, pero nada hace el efecto de desplazamiento que esto pone en todas las imágenes y no solo en la activa.
<div id="villas"> <div class="l_villa"> <a href="./img/villa1.png" alt="villa1"> <img id="lv1" src="./img/villa1.png" alt="villa1"> </a> <div class="lvinfos1"> Lorem ipsum dolor sit amet. </div> </div> <div class="l_villa"> <a href="./img/villa2.png" alt="villa2"> <img class="lv1" src="./img/villa2.png" alt="villa2"> </a> <div class="lvinfos2"> Lorem ipsum dolor sit amet. </div> </div> $(document).ready(function(){ $(".l_villa").mouseover(function(){ $(".lvinfos1").slideUp("slow"); }); $(".l_villa").mouseleave(function(){ $(".lvinfos1").slideDown('slow'); }); });Para hacer lo que requiere, cambie todos los elementos .lvinfosN para que tengan la misma clase. Yo sugeriría .lvinfos . Luego, en el controlador de eventos, use la palabra clave this para hacer referencia al elemento que generó el evento y use DOM traversal para apuntar al elemento relacionado para deslizarlo hacia arriba o hacia abajo. En este caso, find() funcionará.
Tenga en cuenta que el código se puede acortar usando el método hover() junto con slideToggle() . Además, también vale la pena llamar a stop() para evitar que varias animaciones se pongan en cola cuando el usuario entra o sale repetidamente del elemento.
$(document).ready(function() { $('.l_villa').hover(function() { $(this).find('.lvinfos').stop(true).slideToggle("slow"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="villas"> <div class="l_villa"> <a href="./img/villa1.png" alt="villa1"> <img id="lv1" src="./img/villa1.png" alt="villa1"> </a> <div class="lvinfos"> Lorem ipsum dolor sit amet. </div> </div> <div class="l_villa"> <a href="./img/villa2.png" alt="villa2"> <img class="lv1" src="./img/villa2.png" alt="villa2"> </a> <div class="lvinfos"> Lorem ipsum dolor sit amet. </div> </div> </div>