Estoy intentando mostrar un elemento oculto dentro de una lista, debería mostrarse al pasar el ratón por encima del elemento padre pero no se como seleccionar ese elemento sin seleccionarlos todos, aqui dejo el ejemplo. Gracias.
$(document).on('mouseover', '.sent > p', function (e) {
let a = e.firstElementChild;
$(a).fadeIn();
});
$(document).on('mouseleave', '.sent > p', function (e) {
let a = e.firstElementChild;
$(a).fadeOut();
});
.sent{
background: #44494fff;
border-radius: 15px;
width: -moz-max-content;
height: -moz-max-content;
min-width: 30px;
vertical-align: middle;
padding:0 15px;
list-style: none;
color: #fff;
}
.action{
border: 1px solid #0000004d;
background: #44494c;
cursor: pointer;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="sent"><p>primer hijo <span class="action">boton</span></li>
<li class="sent"><p>primer hijo <span class="action">boton</span></li>
<li class="sent"><p>primer hijo <span class="action">boton</span></li>
</ul>