39 - Eventos mouseover, mouseout (DOM)



Problema:Crear una tabla con dos filas y dos columnas cambiar el color del interior de la casilla cuando ingresamos con el mouse.
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>casilla 1,1</td>
            <td>casilla 1,2</td>
        </tr>
        <tr>
            <td>casilla 2,1</td>
            <td>casilla 2,2</td>
        </tr>
    </table>
    <script src="funciones.js"></script>
</body>

</html>
let vec = document.getElementsByTagName('td')
for (let f = 0; f < vec.length; f++) {
    vec[f].addEventListener('mouseover', entroCasilla)
    vec[f].addEventListener('mouseout', salioCasilla)
}

function entroCasilla(e) {
    e.target.style.backgroundColor = '#ff0'
}

function salioCasilla(e) {
    e.target.style.backgroundColor = '#fff'
}
Ver solución


Retornar