Si entiendo bien lo que deseas hacer, basta con usar el método hover()
de JQuery y escribir los manejadores de evento (mouseenter
y mouseleave
) adecuados.
El problema en tu código es que tiene mucho enredo con el llamado a clases padre y luego hijas de dicho padre:
var detalles = $(this).parent().find('.divDetalles');
Eso está un poco rebuscado, podrías simplemente usar:
$(event.currentTarget).find('.divDetalles').css(...);
Por otro lado, intentas usar el evento hover
, el cual no existe para elementos del DOM. Tal vez tienes la confusión con la pseudo clase :hover
de CSS.
Puedes consultar la lista de eventos del Mouse en la documentación oficial.
Los eventos que te interesan son mouseenter
y mouseleave
.
JQuery nos provee de un método el cual recibe 2 manejadores como argumentos, uno para cada evento.
Tu código podría verse de la siguiente forma:
// Manejador para mouseenter
const showDetalles = (event) => {
$(event.currentTarget).find('.divDetalles').css({
"display": "flex",
"left": `${event.clientX + 20}px`,
"top": `${event.clientY + 20}px`
});
}
// manejador para mouseleave
const hideDetalles = (event) => {
$(event.currentTarget).find('.divDetalles').css({"display": "none"});
}
$('#cancha').hover(showDetalles, hideDetalles);
#cancha {
border: 1px solid red;
}
.divDetalles {
display: none;
border: 1px dotted green;
width: 100px;
height: 100px;
background: white;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cancha">
<div class="divDetalles">Oculto</div>
<div class="posicionJugador">Visible</div>
</div>
Con esto ya tienes la funcionalidad que buscas.
En tu pregunta dices:
Tengo el evento dentro de la función porque así es como lo necesito.
Pues envuelves el código en la función que creas conveniente, sin embargo, no lo veo práctico, ya que para que funcione debes ejecutar primero la función, por ejemplo, el div
oculto no se mostrará si no presiono primero el botón:
// Manejador para mouseenter
function miFuncion() {
const showDetalles = (event) => {
$(event.currentTarget).find('.divDetalles').css({
"display": "flex",
"left": `${event.clientX + 20}px`,
"top": `${event.clientY + 20}px`
});
}
// manejador para mouseleave
const hideDetalles = (event) => {
$(event.currentTarget).find('.divDetalles').css({"display": "none"});
}
$('#cancha').hover(showDetalles, hideDetalles);
}
// aqui ejecuto la función si se presiona el botón
$('#ejecutar').click(e => {
miFuncion();
});
#cancha {
border: 1px solid red;
}
.divDetalles {
display: none;
border: 1px dotted green;
width: 100px;
height: 100px;
background: white;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cancha">
<div class="divDetalles">Oculto</div>
<div class="posicionJugador">Visible</div>
</div>
<br>
<button id="ejecutar" type="button">Ejecutar Función</button>
Espero que esto te ayude a resolver el problema.