12 - Eventos mouseover y mouseout.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <table border="1">
    <tr>
      <td>casilla1,1</td>
      <td> casilla 1,2</td>
    </tr>
    <tr>
      <td>casilla 2,1</td>
      <td>casilla 2,2</td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>
let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("td");
  x.mouseover(entraMouse);
  x.mouseout(salirMouse);
}

function entraMouse() {
  $(this).css("background-color", "#ff0");
}

function salirMouse() {
  $(this).css("background-color", "#fff");
}

Crear una tabla con dos filas y dos columnas, cambiar el color del interior de la casilla cuando ingresamos con el mouse y dejarla con dicho color cuando retiramos la flecha.


Ver solución

pagina1.html





funciones.js



Retornar