27 - Información generada en un evento



Problema:Cuando se presione el botón del mouse sobre un párrafo, mostrar un div a 10 píxeles más abajo y 10 píxeles a la derecha con un mensaje de ayuda.
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body id="cuerpo">
    <p onclick="presionado(event)">Presione el párrafo con el mouse.</p>
    <div id="ayuda">
        Ayuda.
    </div>
    <script src="funciones.js"></script>
</body>

</html>
#ayuda {
    color: #aa0;
    background-color: #ff0;
    position: absolute;
    text-align: center;
    left: 40px;
    top: 30px;
    width: 100px;
    height: 40px;
    display: none;
}
function presionado(e) {
    let obj = document.getElementById('ayuda')
    obj.style.display = 'block'
    obj.style.left = e.clientX + 10 + 'px'
    obj.style.top = e.clientY + 10 + 'px'
}
Ver solución


Retornar