Estoy sacando registros de una tabla y salen todos los que hay. Cada uno se representa como una tarjeta. En ellos le he añadido un div que quiero que cambie de posición cuando paso por encima de el, pero al ser registros dinamicos no consigo hacerlo funcionar en todos.
Lo intento de la siguiente forma:
$( ".posicionPapelera" ).mouseenter(function() {
$(this).find('.posicionPapelera').css("right","-37px");
$(this).find('.posicionPapelera').css("transition","1s");
});
$( ".posicionPapelera" ).mouseleave(function() {
$(this).find('.posicionPapelera').css("right","-71px")
$(this).find('.posicionPapelera').css("transition","1s");
});
El CSS de #posicionPapelera
:
.posicionPapelera {
position: absolute;
top: 11px;
right: -71px;
background: #40576b;
border-radius: 3px;
padding: 0px 31px 0px 4px;
}
La vista:
@foreach ($productos as $pro)
//datos
<div class="posicionPapelera" id="posicionPapelera">
<a href=""><i class="far fa-edit eyeProduct"></i></a>
<a href=""><i class="far fa-trash-alt eyeProduct"></i></a>
</div>
//datos
@endforeach
No llega a efectuar ninguna acción cuando paso por encima.