From 17ce1f933609e8b91e2d045b62301d7d92444302 Mon Sep 17 00:00:00 2001
From: Maksumi Murakami <maksumimurakami@gmail.com>
Date: Sun, 12 Jul 2020 16:46:16 -0500
Subject: [PATCH 1/2] =?UTF-8?q?Traducci=C3=B3n=20lista=20de=20Moviendo=20e?=
 =?UTF-8?q?l=20mouse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../solution.view/index.html                  |  22 +--
 .../source.view/index.html                    |  10 +-
 .../1-behavior-nested-tooltip/task.md         |  18 +-
 .../2-hoverintent/task.md                     |  32 ++--
 .../article.md                                | 174 +++++++++---------
 .../script.js                                 |  36 ++--
 .../mouseoverout.view/index.html              |   2 +-
 2-ui/3-event-details/index.md                 |   4 +-
 8 files changed, 149 insertions(+), 149 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
index e998165fd..4f94ee2d2 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* the tooltip should work after page scroll too */
+      /* El tooltip debe funcionar también despues de hacer scroll */
     }
 
     .tooltip {
@@ -66,25 +66,25 @@
     let tooltip;
 
     document.onmouseover = function(event) {
-      // important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
-      // so mouseover may happen on a child.
+      // Importante: un movimiento ráido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
+      // por lo tanto mouseover podría ejecutarse en un descendiente.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
       if (!anchorElem) return;
 
-      // show tooltip and remember it
+      //  Mostrando el tooltip y recordandolo
       tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
     }
 
     document.onmouseout = function() {
-      // it is possible that mouseout triggered, but we're still inside the element
-      // (its target was inside, and it bubbled)
-      // but in this case we'll have an immediate mouseover,
-      // so the tooltip will be destroyed and shown again
+      // es posible que mouseout se active, pero estaremos dentro del elemento
+      // (el target ocurrira dentro y se aparecera)
+      // pero en este caso tendremos un mouse over inmediato,
+      // entonces el tooltip será destruido y mostrado otra vez
       //
-      // luckily, the "blinking" won't be visible,
-      // as both events happen almost at the same time
+      // afortunadamente, el parpadeo no es visble,
+      // ya que ambos eventos ocurren casi al mismo tiempo.
       if (tooltip) {
         tooltip.remove();
         tooltip = false;
@@ -101,7 +101,7 @@
 
       let coords = anchorElem.getBoundingClientRect();
 
-      // position the tooltip over the center of the element
+      // Posicionando el tooltip sobre el centro del elemento
       let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
       if (left < 0) left = 0;
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
index 2dc4394e7..f55307566 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* the tooltip should work after page scroll too */
+      /* El tooltip debe funcionar también despues de hacer scroll */
     }
 
     .tooltip {
@@ -49,8 +49,8 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="Aquí esta el interior de la casa" id="house">
+    <div data-tooltip="Aquí está el techo" id="roof"></div>
 
     <p>Once upon a time there was a mother pig who had three little pigs.</p>
 
@@ -58,12 +58,12 @@
 
     <p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
 
-    <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
+    <p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Continúa leyendo…">Colócate sobre mí</a></p>
 
   </div>
 
   <script>
-    // ...your code...
+    // ...tu codigo...
   </script>
 
 </body>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
index c77aa0728..79123f95a 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
@@ -2,24 +2,24 @@ importance: 5
 
 ---
 
-# Improved tooltip behavior
+# Comportamiento mejorado de un tooltip
 
-Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
+Escribe JavaScript que muestre un tooltip sobre un elemento con el atributo `data-tooltip`. El valor de este atributo debe convertirse en el texto del tooltip.
 
-That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
+Es como la tarea <info:task/behavior-tooltip>, pero aquí los elementos anotados se pueden anidar. Los tooltips más internos se muestran.
 
-Only one tooltip may show up at the same time.
+Solamente un tooltip puede aparecer a la vez.
 
-For instance:
+Por ejemplo:
 
 ```html
-<div data-tooltip="Here – is the house interior" id="house">
-  <div data-tooltip="Here – is the roof" id="roof"></div>
+<div data-tooltip="Aquí – está el interior de la casa" id="house">
+  <div data-tooltip="Aquí – está el techo" id="roof"></div>
   ...
-  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
+  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Continúa leyendo…">Colócate sobre mi</a>
 </div>
 ```
 
-The result in iframe:
+El resultado en el iframe:
 
 [iframe src="solution" height=300 border=1]
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
index 72e615bdd..59ccb9d48 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
@@ -1,31 +1,31 @@
-importance: 5
+Importancia: 5
 
 ---
 
-# "Smart" tooltip
+# Tooltip "inteligente"
 
-Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*.
+Escribe una función que muestre un tooltip sobre un elemento solamente si el visitante mueve el mouse *hacia él*, pero no *a través de él*.
 
-In other words, if the visitor moves the mouse to the element and stops there -- show the tooltip. And if they just moved the mouse through, then no need, who wants extra blinking?
+En otras palabras, si el visitante mueve el mouse hacia el elemento y para ahí -- muestra el tooltip. Y si solamente mueve el mouse a través, entonces no lo necesitamos. ¿Quién quiere parpadeos extra?
 
-Technically, we can measure the mouse speed over the element, and if it's slow then we assume that it comes "over the element" and show the tooltip, if it's fast -- then we ignore it.
+Tecnicamente, podemos medir la velocidad del mouse sobre el elemento, y si es lenta podemos asumir que el mouse viene "sobre el elemento" y mostramos el tooltip, si es rápida -- entonces lo ignoramos.
 
-Make a universal object `new HoverIntent(options)` for it.
+Hay que crear un objeto universal `new HoverIntent(options)` para ello.
 
-Its `options`:
-- `elem` -- element to track.
-- `over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it.
-- `out` -- a function to call when the mouse leaves the element (if `over` was called).
+Sus `options`:
+- `elem` -- elemento a seguir.
+- `over` -- una función a llamar si el el mouse viene hacia el elemento: o sea, si viene lentamente o para sobre él.
+- `out` -- una función a llmar cuando el mouse abandona el lemento (si `over` fue llamado).
 
-An example of using such object for the tooltip:
+Un ejemplo de dicho objeto siendo usado para el tooltip:
 
 ```js
-// a sample tooltip
+//  un tooltip de muestra
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";
 
-// the object will track mouse and call over/out
+// el obeto va a rastrear al mouse y llamar a over/out
 new HoverIntent({
   elem,
   over() {
@@ -39,10 +39,10 @@ new HoverIntent({
 });
 ```
 
-The demo:
+El demo:
 
 [iframe src="solution" height=140]
 
-If you move the mouse over the "clock" fast then nothing happens, and if you do it slow or stop on them, then there will be a tooltip.
+Si mueves el mouse sobre el "reloj" rápido entonces no pasará nada, y si lo haces lento o paras sobre él, Entonces habrá un tooltip.
 
-Please note: the tooltip doesn't "blink" when the cursor moves between the clock subelements.
+Toma en cuenta que el tooltip no "parpadea" cuando el cusor se mueve entre subelementos del reloj.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index c7ac0d4db..07803af8b 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -1,78 +1,78 @@
-# Moving the mouse: mouseover/out, mouseenter/leave
+# Moviendo el mouse: mouseover/out, mouseenter/leave
 
-Let's dive into more details about events that happen when the mouse moves between elements.
+Entremos en detalle sobre los eventos que suceden cuando el mouse se mueve entre elementos.
 
-## Events mouseover/mouseout, relatedTarget
+## Eventos mouseover/mouseout, relatedTarget
 
-The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
+El evento `mouseover`  se produce cuando un puntero del mouse aparece sobre un elemento y `mouseout` -- cuando se va.
 
 ![](mouseover-mouseout.svg)
 
-These events are special, because they have property `relatedTarget`. This property complements `target`. When a mouse leaves one element for another, one of them becomes `target`, and the other one - `relatedTarget`.
+Estos eventos son especiales porque tienen propiedades `relatedTarget`. Esta propiedad complementa `target`. Cuando el puntero del mouse deja un elemento por otro, uno de ellos se convierte en `target` y el otro en - `relatedTarget`.
 
-For `mouseover`:
+Para `mouseover`:
 
-- `event.target` -- is the element where the mouse came over.
-- `event.relatedTarget` -- is the element from which the mouse came (`relatedTarget` -> `target`).
+- `event.target` -- Es el elemento al que se acerca el mouse.
+- `event.relatedTarget` -- es el elemento de donde proviene el mouse (`relatedTarget` -> `target`).
 
-For `mouseout` the reverse:
+Para `mouseout` al contrario:
 
-- `event.target` -- is the element that the mouse left.
-- `event.relatedTarget` -- is the new under-the-pointer element, that mouse left for (`target` -> `relatedTarget`).
+- `event.target` -- Es el elemento que el mouse dejó.
+- `event.relatedTarget` -- es el nuevo elemento bajo el cursor por cuál el cursor dejó al anterior (`target` -> `relatedTarget`).
 
 ```online
-In the example below each face and its features are separate elements. When you move the mouse, you can see mouse events in the text area.
+En el siguiente ejemplo, cada cara y sus características son elementos separados. Cuando mueves el mouse, puedes ver los eventos del mouse que ocurren en el área de texto.
 
-Each event has the information about both `target` and `relatedTarget`:
+Cada evento tiene la información sobre ambos `target` y `relatedTarget`:
 
 [codetabs src="mouseoverout" height=280]
 ```
 
-```warn header="`relatedTarget` can be `null`"
-The `relatedTarget` property can be `null`.
+```warn header="`relatedTarget` puede ser `null`"
+La propiedad `relatedTarget` puede tener un valor `null`.
 
-That's normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window.
+Eso es normal y solo significa que el mouse no vino de otro elemento, sino de la ventana o que salió de la ventana.
 
-We should keep that possibility in mind when using `event.relatedTarget` in our code. If we access `event.relatedTarget.tagName`, then there will be an error.
+Debemos tener en cuenta esa posibilidad cuando usemos `event.relatedTarget` en nuestro código. Si accedemos a `event.relatedTarget.tagName` entonces habrá un error.
 ```
 
-## Skipping elements
+## Saltando Elementos
 
-The `mousemove` event triggers when the mouse moves. But that doesn't mean that every pixel leads to an event.
+El evento `mousemove`  se activa cuando el mouse se mueve. Pero eso no significa que cada píxel nos lleve a un evento.
 
-The browser checks the mouse position from time to time. And if it notices changes then triggers the events.
+El navegador verifica la posición del mouse de vez en cuando. Y si nota cambios entonces activa los eventos.
 
-That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped:
+Eso significa que si el visitante mueve el mouse muy rápido, entonces algunos elementos del DOM podrían estar siendo ignorados:
 
 ![](mouseover-mouseout-over-elems.svg)
 
-If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `<div>` elements (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`.
+Si el mouse se mueve muy rápido de los elementos `#FROM` a `#TO`, como se muestra arriba, entonces los elementos intermedios `<div>` (o algunos de ellos) podrían ser ignorados. El evento `mouseout` se podría activar en `#FROM` e inmediatamente `mouseover` en `#TO`.
 
-That's good for performance, because there may be many intermediate elements. We don't really want to process in and out of each one.
+Eso es bueno para el rendimiento porque puede haber muchos elementos intermedios. Realmente no queremos procesarlo todo dentro y fuera de cada uno.
 
-On the other hand, we should keep in mind that the mouse pointer doesn't "visit" all elements along the way. It can "jump".
+Por otro lado, debemos tener en cuenta que el puntero del mouse no "visita" todos los elementos en el camino. Los puede "saltar".
 
-In particular, it's possible that the pointer jumps right inside the middle of the page from out of the window. In that case `relatedTarget` is `null`, because it came from "nowhere":
+En particular, es posible que el puntero salte dentro de la mitad de la página desde la ventana. En ese caso `relatedTarget` es `null`, porque vino de "la nada":
 
 ![](mouseover-mouseout-from-outside.svg)
 
 ```online
-You can check it out "live" on a teststand below.
+Puedes verlo "en vivo" en un testeador a continuación.
 
-Its HTML has two nested elements: the `<div id="child">` is inside the `<div id="parent">`. If you move the mouse fast over them, then maybe only the child div triggers events, or maybe the parent one, or maybe there will be no events at all.
+Este HTML tiene dos elementos: el `<div id="hijo">` está adentro del `<div id="padre">`. Si mueves el mouse rápidamente sobre ellos entonces probablemente solo el `div` hijo active los eventos, o probablemente el padre, o probablemente no ocurran eventos en lo absoluto.
 
-Also move the pointer into the child `div`, and then move it out quickly down through the parent one. If the movement is fast enough, then the parent element is ignored. The mouse will cross the parent element without noticing it.
+También mueva el cursor hacia el `div` hijo y luego muévalo rápidamente hacia abajo a través del padre. Si el movimiento es lo suficientemente rápido entonces el padre será ignorado. El mouse cruzará el elemento padre sin notarlo.
 
 [codetabs height=360 src="mouseoverout-fast"]
 ```
 
-```smart header="If `mouseover` triggered, there must be `mouseout`"
-In case of fast mouse movements, intermediate elements may be ignored, but one thing we know for sure: if the pointer "officially" entered an element (`mouseover` event generated), then upon leaving it we always get `mouseout`.
+```smart header="Si `mouseover` se activa, deberá haber `mouseout`"
+En caso de movimientos rápidos, los elementos intermedios podrían ser ignorados, pero una cosa segura sabemos: si el cursor ingresa "oficialmente" dentro de un elemento(evento `mouseover` generado), una vez que lo deje obtendremos `mouseout`.
 ```
 
-## Mouseout when leaving for a child
+## Mouseout, cuando se deja un elemento por uno anidado.
 
-An important feature of `mouseout` -- it triggers, when the pointer moves from an element to its descendant, e.g. from `#parent` to `#child` in this HTML:
+Una característica importante de `mouseout` -- se activa cuando el cursor se mueve de un elemento hacia su descendiente (elemento anidado o interno). Por ejemplo de `#parent` a `#child` en este HTML:
 
 ```html
 <div id="parent">
@@ -80,92 +80,92 @@ An important feature of `mouseout` -- it triggers, when the pointer moves from a
 </div>
 ```
 
-If we're on `#parent` and then move the pointer deeper into `#child`, but we get `mouseout` on `#parent`!
+Si estamos sobre `#parent` y luego movemos el cursor hacia dentro de `#child`, ¡vamos a obtener `mouseout` en`#parent`!
 
 ![](mouseover-to-child.svg)
 
-That may seem strange, but can be easily explained.
+Eso puede parecer extraño, pero puede explicarse fácilmente.
 
-**According to the browser logic, the mouse cursor may be only over a *single* element at any time -- the most nested one and top by z-index.**
+**De acuerdo con la lógica del navegador, el cursor podría estar sobre un elemento *individual* en cualquier momento -- el anidado y el más alto segun el z-index.**
 
-So if it goes to another element (even a descendant), then it leaves the previous one.
+Entonces si se dirige hacia otro elemento (incluso uno anidado), está dejando al anterior.
 
-Please note another important detail of event processing.
+Por favor, note otro importante detalle sobre el procesamiento de eventos.
 
-The `mouseover` event on a descendant bubbles up. So, if `#parent` has `mouseover` handler, it triggers:
+El evento `mouseover` sobre un elemento anidado brota. Entonces si `#parent` tiene el cotrolador `mouseover`, se activa:
 
 ![](mouseover-bubble-nested.svg)
 
 ```online
-You can see that very well in the example below: `<div id="child">` is inside the `<div id="parent">`. There are `mouseover/out` handlers on `#parent` element that output event details.
+Puedes verlo muy bien a continuación: `<div id="child">` está dentro de`<div id="parent">`. Hay controladores `mouseover/out` en el elemento `#parent` que arrojan los detalles de los eventos.
 
-If you move the mouse from `#parent` to `#child`, you see two events on `#parent`:
-1. `mouseout [target: parent]` (left the parent), then
-2. `mouseover [target: child]` (came to the child, bubbled).
+Si mueves el mouse de `#parent` a `#child`, verás dos eventos sobre `#parent`:
+1. `mouseout [target: parent]` (dejo al padre), luego
+2. `mouseover [target: child]` (vino hacia el hijo, brotó).
 
 [codetabs height=360 src="mouseoverout-child"]
 ```
 
-As shown, when the pointer moves from `#parent` element to `#child`, two handlers trigger on the parent element: `mouseout` and `mouseover`:
+Como se muestra, cuando el puntero se mueve del elemento `#parent` a `#child`, los dos controladores se activan en el elemento padre: `mouseout` y `mouseover`:
 
 ```js
 parent.onmouseout = function(event) {
-  /* event.target: parent element */
+  /* event.target: elemento padre  */
 };
 parent.onmouseover = function(event) {
-  /* event.target: child element (bubbled) */
+  /* event.target: elemento hijo (brota) */
 };
 ```
 
-**If we don't examine `event.target` inside the handlers, then it may seem that the mouse pointer left `#parent` element, and then immediately came back over it.**
+**Si no examinamos `event.target` dentro de los controladores podría parecer que el puntero del  elemento `#parent` y volvió a él inmediatamente.**
 
-But that's not the case! The pointer is still over the parent, it just moved deeper into the child element.
+Pero ese no es el caso. El puntero aún está sobre el elemento padre, simplemente se adentró más en el elemento hijo.
 
-If there are some actions upon leaving the parent element, e.g. an animation runs in `parent.onmouseout`, we usually don't want it when the pointer just goes deeper into `#parent`.
+Si hay algunas acciones al abandonar el elemento padre,por ejemplo: una animación se ejecuta con `parent.onmouseout`, usualmente no la queremos cuando el puntero se adentre más sobre `#parent`.
 
-To avoid it, we can check `relatedTarget` in the handler and, if the mouse is still inside the element, then ignore such event.
+Para evitar esto lo que podemos hacer es checar `relatedTarget` en el controlador y si el mouse aún permancece dentro del eelmento entonces ignorar dicho evento.
 
-Alternatively we can use other events: `mouseenter` and `mouseleave`, that we'll be covering now, as they don't have such problems.
+Alternativamente podemos usar otros eventos: `mouseenter` y `mouseleave`, los cuales cubriremos a continuación, ya que con ellos no hay tales problemas.
 
-## Events mouseenter and mouseleave
+## Eventos mouseenter y mouseleave
 
-Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They trigger when the mouse pointer enters/leaves the element.
+Los eventos `mouseenter/mouseleave` son como `mouseover/mouseout`. Se activan cuando el cursor del mouse entra/sale del elemento.
 
-But there are two important differences:
+Pero hay dos diferencias importantes:
 
-1. Transitions inside the element, to/from descendants, are not counted.
-2. Events `mouseenter/mouseleave` do not bubble.
+1. Las transiciones hacía/desde los descendientes no se cuentan.
+2. Los eventos `mouseenter/mouseleave` no brotan.
 
-These events are extremely simple.
+Son eventos extremadamente simples.
 
-When the pointer enters an element -- `mouseenter` triggers. The exact location of the pointer inside the element or its descendants doesn't matter.
+Cuando el cursor entra en un elemento -- `mouseenter` se activa. La ubicación exacta del cursor dentro del elemento o sus descendientes no importa.
 
-When the pointer leaves an element -- `mouseleave` triggers.
+Cuando el cursor deja el elemento -- `mouseleave` se activa.
 
 ```online
-This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`.
+Este ejemplo es similar al anterior, pero ahora el elemento tiene `mouseenter/mouseleave` en lugar de `mouseover/mouseout`.
 
-As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored
+Como puedes ver, los únicos eventos generados son los relacionados con mover el puntero dentro y fuera del elemento superior. No pasa nada cuando el puntero va hacia el descendiente y regresa. Las transiciones entre descendientes se ignoran:
 
 [codetabs height=340 src="mouseleave"]
 ```
 
-## Event delegation
+## Delegación de eventos
 
-Events `mouseenter/leave` are very simple and easy to use. But they do not bubble. So we can't use event delegation with them.
+Los eventos `mouseenter/leave` son muy simples de usar. Pero no brotan por sí solos. Por lo tanto no podemos usar la delagación de eventos con ellos.
 
-Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells.
+Imagina que queremos manejar entrada/salida para celdas de tabla y hay cientos de celdas.
 
-The natural solution would be -- to set the handler on `<table>` and process events there. But `mouseenter/leave` don't bubble. So if such event happens on `<td>`, then only a handler on that `<td>` is able to catch it.
+La solución natural sería -- ajustar el controlador en `<table>` y manejar los eventos desde ahí. Pero `mouseenter/leave` no aparece. Entonces si cada evento sucede en `<td>`, solamente un controlador `<td>` es capaz de detectarlo.
 
-Handlers for `mouseenter/leave` on `<table>` only trigger when the pointer enters/leaves the table as a whole. It's impossible to get any information about transitions inside it.
+Los controladores `mouseenter/leave` en `<table>` solamente se activan cuando el cursor entra/deja la tabla completa. Es imposible obtener alguna información sobre las transiciones dentro de ella.
 
-So, let's use `mouseover/mouseout`.
+Pues usemos `mouseover/mouseout`.
 
-Let's start with simple handlers that highlight the element under mouse:
+Comencemos con controladores simples que resaltan el elemento debajo del mouse:
 
 ```js
-// let's highlight an element under the pointer
+// Resaltemos un elemento debajo del cursor
 table.onmouseover = function(event) {
   let target = event.target;
   target.style.background = 'pink';
@@ -178,44 +178,44 @@ table.onmouseout = function(event) {
 ```
 
 ```online
-Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted:
+Aquí se muestran en acción. A medida que el mouse recorre los elementos de esta tabla, se resalta la actual:
 
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
 ```
 
-In our case we'd like to handle transitions between table cells `<td>`: entering a cell and leaving it. Other transitions, such as inside the cell or outside of any cells, don't interest us. Let's filter them out.
+En nuestro caso nos gustarías manejar las transiciones entre las celdas de la tabla `<td>`: entrando a una celda y saliendo de ella. Otras transiciones, como dentro de una celda o fuera de cualquiera de ellas no nos interesan. Vamos a filtrarlas.
 
-Here's what we can do:
+Esto es lo que podemos hacer:
 
-- Remember the currently highlighted `<td>` in a variable, let's call it `currentElem`.
-- On `mouseover` -- ignore the event if we're still inside the current `<td>`.
-- On `mouseout` -- ignore if we didn't leave the current `<td>`.
+- Recordar el elemento `<td>` resaltado actualmente en una variable, llamémosla `currentElem`.
+- En `mouseover` -- ignorar el evento si permanecemos dentro del `<td>` actual.
+- En `mouseout` -- ignorar el evento si no hemos dejado el `<td>` actual.
 
-Here's an example of code that accounts for all possible situations:
+Aquí hay un ejemplo de código que explica todas las situaciones posibles:
 
 [js src="mouseenter-mouseleave-delegation-2/script.js"]
 
-Once again, the important features are:
-1. It uses event delegation to handle entering/leaving of any `<td>` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation.
-2. Extra events, such as moving between descendants of `<td>` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters `<td>` as a whole.
+Una vez más, las características importantes son:
+1. Utilizar la delegación de eventos para manejar la entrada/salida de cualquier `<td>` dentro de la tabla. Pues depende de `mouseover/out` en lugar de `mouseenter/leave` que no broten y por lo tanto no permita ninguna delgación.
+2. Los eventos adicionales, como moverse entre descendientes de `<td>` son filtrados, así que `onEnter/Leave` solamente se ejecuta si el cursor ingresa a `<td>` o lo deja absolutamente.
 
 ```online
-Here's the full example with all details:
+Aquí está el ejemplo completo con todos los detalles:
 
 [codetabs height=460 src="mouseenter-mouseleave-delegation-2"]
 
-Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't matter. Only `<td>` as a whole is highlighted, unlike the example before.
+Intenta mover el cursor dentro y fuera de las celdas de la tabla y dentro de ellas. Rápido o lento -- no importa --. Solo se ilumina `<td>` como un todo, a diferiencia del ejemplo anterior.
 ```
 
-## Summary
+## Resumen
 
-We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`.
+Hemos cubierto `mouseover`, `mouseout`, `mousemove`, `mouseenter` y`mouseleave`.
 
-These things are good to note:
+Estas cosas son buenas de destacar:
 
-- A fast mouse move may skip intermediate elements.
-- Events `mouseover/out` and `mouseenter/leave` have an additional property: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`.
+- Un movimiento rápido del mouse puede omitir elementos intermedios.
+- Los eventos `mouseover/out` y `mouseenter/leave` tienen una propiedad adicional: `relatedTarget`. Es el elemento de dónde venimos o hacia dónde vamos, complementario con `target`.
 
-Events `mouseover/out` trigger even when we go from the parent element to a child element. The browser assumes that the mouse can be only over one element at one time -- the deepest one.
+Los eventos `mouseover/out` se activan incluso cuando vamos de un elemento padre a su descendiente. El navegador asume que de el mouse solo puede estar sobre un elemento a la vez -- el más interno.
 
-Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble.
+Los eventos `mouseenter/leave` son diferentes en ese aspecto: solo se activan cuando el mouse viene hacia el elemento o lo deja como un todo. Así que no se aparecen de repente.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
index 6a3202467..459243e82 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -1,54 +1,54 @@
-// <td> under the mouse right now (if any)
+// Los elementos <td> bajo el maouse justo ahora(si es que hay)
 let currentElem = null;
 
 table.onmouseover = function(event) {
-  // before entering a new element, the mouse always leaves the previous one
-  // if currentElem is set, we didn't leave the previous <td>,
-  // that's a mouseover inside it, ignore the event
+  // antes de ingresar un uevo elemento, el mouse siempre abandonará al anterior
+  // si currentElem está establecido, no abdandonamos el <td> anterior,
+  // hay un mouseover dentro de él, ignoramos el evento
   if (currentElem) return;
 
   let target = event.target.closest('td');
 
-  // we moved not into a <td> - ignore
+  // si no hay movimientos dentro de un <td> - lo ignoramos
   if (!target) return;
 
-  // moved into <td>, but outside of our table (possible in case of nested tables)
-  // ignore
+  //si hay movimientos dentro de un <td>, pero afuera de una tabla(posiblemente en caso de tablas anidadas)
+  // lo ignoramos
   if (!table.contains(target)) return;
 
-  // hooray! we entered a new <td>
+  // ¡Genial! ingresamos a un nuevo <td>
   currentElem = target;
   onEnter(currentElem);
 };
 
 
 table.onmouseout = function(event) {
-  // if we're outside of any <td> now, then ignore the event
-  // that's probably a move inside the table, but out of <td>,
-  // e.g. from <tr> to another <tr>
+  // si estamos afuera de algún <td> ahora, entonces ignoramos el evento
+  // pueden haber movimientos dentro de una tabla pero fuera de <td>,
+  // por ejemplo: de un <tr> a otro <tr>
   if (!currentElem) return;
 
-  // we're leaving the element – where to? Maybe to a descendant?
+  // abandonamos el elemento – ¿pero hacia dónde? ¿podría ser hacia un descendiente?
   let relatedTarget = event.relatedTarget;
 
   while (relatedTarget) {
-    // go up the parent chain and check – if we're still inside currentElem
-    // then that's an internal transition – ignore it
+    // vamos a la cadena de padres y verificamos – si aún estamos dentro de currentElem
+    // entonces hay una transición interna – la ignramos
     if (relatedTarget == currentElem) return;
 
     relatedTarget = relatedTarget.parentNode;
   }
 
-  // we left the <td>. really.
+  // abandonamos el <td>.
   onLeave(currentElem);
   currentElem = null;
 };
 
-// any functions to handle entering/leaving an element
+// algunas funciones para manejar entradas/salidas de un elemento
 function onEnter(elem) {
   elem.style.background = 'pink';
 
-  // show that in textarea
+  // lo mostramos en el area de texto
   text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`;
   text.scrollTop = 1e6;
 }
@@ -56,7 +56,7 @@ function onEnter(elem) {
 function onLeave(elem) {
   elem.style.background = '';
 
-  // show that in textarea
+  // lo mostramos en el area de texto
   text.value += `out <- ${elem.tagName}.${elem.className}\n`;
   text.scrollTop = 1e6;
 }
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
index 022fd00db..52ab45f45 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/index.html
@@ -28,7 +28,7 @@
     </div>
   </div>
 
-  <textarea id="log">Events will show up here!
+  <textarea id="log">¡Los eventos se mostrarán aquí!
 </textarea>
 
   <script src="script.js"></script>
diff --git a/2-ui/3-event-details/index.md b/2-ui/3-event-details/index.md
index 569f08137..e3f7aa297 100644
--- a/2-ui/3-event-details/index.md
+++ b/2-ui/3-event-details/index.md
@@ -1,3 +1,3 @@
-# UI Events
+# Eventos en la UI
 
-Here we cover most important user interface events and how to work with them.
+Aquí cubriremos los eventos más importantes de la interfaz de usuario y cómo trabajar con ellos.

From 73547e68452b8e75a615e8c62b8a046cfa172df0 Mon Sep 17 00:00:00 2001
From: Maksumi Murakami <maksumimurakami@gmail.com>
Date: Mon, 13 Jul 2020 13:43:24 -0500
Subject: [PATCH 2/2] Moving the mouse: mouseover/out, mouseenter/leave

---
 .../solution.view/index.html                  | 14 ++---
 .../source.view/index.html                    |  2 +-
 .../2-hoverintent/solution.md                 | 22 +++----
 .../solution.view/hoverIntent.js              | 26 ++++----
 .../2-hoverintent/source.view/hoverIntent.js  | 18 +++---
 .../2-hoverintent/task.md                     |  8 +--
 .../article.md                                | 60 +++++++++----------
 .../script.js                                 |  6 +-
 2-ui/3-event-details/index.md                 |  2 +-
 9 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
index 4f94ee2d2..c3b9860b5 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* El tooltip debe funcionar también despues de hacer scroll */
+      /* El tooltip debe seguir funcionando aúnn después de hacer scroll */
     }
 
     .tooltip {
@@ -66,24 +66,24 @@
     let tooltip;
 
     document.onmouseover = function(event) {
-      // Importante: un movimiento ráido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
+      // Importante: un movimiento rápido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
       // por lo tanto mouseover podría ejecutarse en un descendiente.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
       if (!anchorElem) return;
 
-      //  Mostrando el tooltip y recordandolo
+      //  Mostrando el tooltip y recordándolo.
       tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
     }
 
     document.onmouseout = function() {
-      // es posible que mouseout se active, pero estaremos dentro del elemento
-      // (el target ocurrira dentro y se aparecera)
+      // Es posible que mouseout se active, pero estaremos dentro del elemento
+      // (el target ocurrirá dentro y se aparecerá)
       // pero en este caso tendremos un mouse over inmediato,
-      // entonces el tooltip será destruido y mostrado otra vez
+      // entonces el tooltip será destruido y mostrado otra vez.
       //
-      // afortunadamente, el parpadeo no es visble,
+      // Afortunadamente, el parpadeo no es visble,
       // ya que ambos eventos ocurren casi al mismo tiempo.
       if (tooltip) {
         tooltip.remove();
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
index f55307566..6ddaaaf96 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
@@ -63,7 +63,7 @@
   </div>
 
   <script>
-    // ...tu codigo...
+    // ...tu código...
   </script>
 
 </body>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
index 36eaca1a3..0124f0aeb 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
@@ -1,18 +1,18 @@
 
-The algorithm looks simple:
-1. Put `onmouseover/out` handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation.
-2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
-3. If the speed is slow, then run `over`.
-4. When we're going out of the element, and `over` was executed, run `out`.
+El algorítmo luce simple:
+1. Coloca los controladores `onmouseover/out` en el elemento. Aquí también podemos usar `onmouseenter/leave` pero son menos universales, no funcionan si introducimos delegaciones.
+2. Cuando el cursor ingrese al elemento debes medir la velocidad en `mousemove`.
+3. Si la velocidad es lenta hay que ejecutar `over`.
+4. Si estamos saliendo del elemento, y `over` ya se había ejecutado, ahora ejecutamos `out`.
 
-But how to measure the speed?
+¿Pero cómo mediremos la velocidad?
 
-The first idea can be: run a function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
+La primera idea puede ser: correr una función cada `100ms` y medir la distancia entre la coordenada anterior y la actual. Si es pequeña entonces la velocidad fue rápida.
 
-Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
+Desafortunadamente no hay manera para obtener las coordenadas actuales del mouse en JavaScript. No existe algo así como `getCurrentMouseCoordinates()`.
 
-The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object.
+La única manera es registrando los eventos del mouse, como `mousemove`, y tomar las coordenadas del objeto del evento.
 
-So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
+Entonces configuremos un `mousemove` para registrar las coordenadas y recordarlas. Y entonces las comparamos, una por cada `100ms`.
 
-P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
+PD. Toma nota: El test de la solución usa `dispatchEvent` para ver si el tooltip funciona bien.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
index 4e6e2a3e9..121800e85 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
@@ -3,8 +3,8 @@
 class HoverIntent {
 
   constructor({
-    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
-    interval = 100,    // measure mouse speed once per 100ms
+    sensitivity = 0.1, // Velocidad menor a 0.1px/ms supone un "posicionamiento sobre el elemento"
+    interval = 100,    // Medida de la velocidad del mouse una vez por cada 100ms
     elem,
     over,
     out
@@ -15,12 +15,12 @@ class HoverIntent {
     this.over = over;
     this.out = out;
 
-    // make sure "this" is the object in event handlers.
+    // Segurándonos de que "this" es el objeto en los controladores de eventos
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseOver = this.onMouseOver.bind(this);
     this.onMouseOut = this.onMouseOut.bind(this);
 
-    // and in time-measuring function (called from setInterval)
+    // y en la función para medir el tiempo  (llamada desde setInterval)
     this.trackSpeed = this.trackSpeed.bind(this);
 
     elem.addEventListener("mouseover", this.onMouseOver);
@@ -32,16 +32,16 @@ class HoverIntent {
   onMouseOver(event) {
 
     if (this.isOverElement) {
-      // if we're over the element, then ignore the event
-      // we are already measuring the speed
+      // Si estamos sobre el elemento ignoramos el evento
+      // Ya estamos midiendo la velocidad
       return;
     }
 
     this.isOverElement = true;
 
-    // after every mousemove we'll be check the distance
-    // between the previous and the current mouse coordinates
-    // if it's less than sensivity, then the speed is slow
+    //Después de cada mousemove vamos a checar la distancia
+    // entre la coordinada previa y actual del mouse
+    // si es menor que sensivity entonces la velocidad es muy rápida
 
     this.prevX = event.pageX;
     this.prevY = event.pageY;
@@ -52,13 +52,13 @@ class HoverIntent {
   }
 
   onMouseOut(event) {
-    // if left the element
+    // Si abandomanos el elemento
     if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
       this.isOverElement = false;
       this.elem.removeEventListener('mousemove', this.onMouseMove);
       clearInterval(this.checkSpeedInterval);
       if (this.isHover) {
-        // if there was a stop over the element
+        // Si nos detenemos sobre el elemento
         this.out.call(this.elem, event);
         this.isHover = false;
       }
@@ -76,7 +76,7 @@ class HoverIntent {
     let speed;
 
     if (!this.lastTime || this.lastTime == this.prevTime) {
-      // cursor didn't move
+      // Cursor sin movimieto (detenido)
       speed = 0;
     } else {
       speed = Math.sqrt(
@@ -90,7 +90,7 @@ class HoverIntent {
       this.isHover = true;
       this.over.call(this.elem, event);
     } else {
-      // speed fast, remember new coordinates as the previous ones
+      // Hubo movimiento rápido, registramos las coordenadas actuales como las anteriores
       this.prevX = this.lastX;
       this.prevY = this.lastY;
       this.prevTime = this.lastTime;
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
index a38b42bc2..211466f23 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
@@ -1,12 +1,12 @@
 'use strict';
 
-// Here's a brief sketch of the class
-// with things that you'll need anyway
+// Aquí hay un breve sketch con la clase
+// de cosas que vas a ocupar de cualquier forma
 class HoverIntent {
 
   constructor({
-    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
-    interval = 100, // measure mouse speed once per 100ms: calculate the distance between previous and next points
+    sensitivity = 0.1, // Velocidad menor a 0.1px/ms supone un "posicionamiento sobre el elemento"
+    interval = 100, // Medida de la velocidad del mouse una vez por cada 100ms: cualcula la distancia entre el punto anterior y el actual
     elem,
     over,
     out
@@ -17,16 +17,16 @@ class HoverIntent {
     this.over = over;
     this.out = out;
 
-    // make sure "this" is the object in event handlers.
+    // // Segurándonos de que "this" es el objeto en los controladores de eventos
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseOver = this.onMouseOver.bind(this);
     this.onMouseOut = this.onMouseOut.bind(this);
 
-    // assign the handlers
+    // Asignando los controladores
     elem.addEventListener("mouseover", this.onMouseOver);
     elem.addEventListener("mouseout", this.onMouseOut);
 
-    // continue from this point
+    // Continua trabajando desde este punto
 
   }
 
@@ -44,8 +44,8 @@ class HoverIntent {
 
 
   destroy() {
-    /* your code to "disable" the functionality, remove all handlers */
-    /* it's needed for the tests to work */
+    /* Tu código para "deshabilitar" la funcionalidad, remueve los controladores */
+    /* Es necesario para que las pruebas funcionen*/
   }
 
 }
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
index 59ccb9d48..6222fdb50 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
@@ -1,4 +1,4 @@
-Importancia: 5
+Importance: 5
 
 ---
 
@@ -20,12 +20,12 @@ Sus `options`:
 Un ejemplo de dicho objeto siendo usado para el tooltip:
 
 ```js
-//  un tooltip de muestra
+//  Un tooltip de muestra
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";
 
-// el obeto va a rastrear al mouse y llamar a over/out
+// El objeto va a rastrear al mouse y llamar a over/out
 new HoverIntent({
   elem,
   over() {
@@ -43,6 +43,6 @@ El demo:
 
 [iframe src="solution" height=140]
 
-Si mueves el mouse sobre el "reloj" rápido entonces no pasará nada, y si lo haces lento o paras sobre él, Entonces habrá un tooltip.
+Si mueves el mouse sobre el "reloj" rápido no pasará nada, y si lo haces lento o paras sobre él entonces habrá un tooltip.
 
 Toma en cuenta que el tooltip no "parpadea" cuando el cusor se mueve entre subelementos del reloj.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 07803af8b..86e88eaca 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -4,26 +4,26 @@ Entremos en detalle sobre los eventos que suceden cuando el mouse se mueve entre
 
 ## Eventos mouseover/mouseout, relatedTarget
 
-El evento `mouseover`  se produce cuando un puntero del mouse aparece sobre un elemento y `mouseout` -- cuando se va.
+El evento `mouseover`  se produce cuando el cursor del mouse aparece sobre un elemento y `mouseout` cuando se va.
 
 ![](mouseover-mouseout.svg)
 
-Estos eventos son especiales porque tienen propiedades `relatedTarget`. Esta propiedad complementa `target`. Cuando el puntero del mouse deja un elemento por otro, uno de ellos se convierte en `target` y el otro en - `relatedTarget`.
+Estos eventos son especiales porque tienen la propiedad `relatedTarget`. Esta propiedad complementa a `target`. Cuando el puntero del mouse deja un elemento por otro, uno de ellos se convierte en `target` y el otro en  `relatedTarget`.
 
 Para `mouseover`:
 
 - `event.target` -- Es el elemento al que se acerca el mouse.
-- `event.relatedTarget` -- es el elemento de donde proviene el mouse (`relatedTarget` -> `target`).
+- `event.relatedTarget` -- Es el elemento de donde proviene el mouse (`relatedTarget` -> `target`).
 
-Para `mouseout` al contrario:
+Para `mouseout` sucede al contrario:
 
 - `event.target` -- Es el elemento que el mouse dejó.
 - `event.relatedTarget` -- es el nuevo elemento bajo el cursor por cuál el cursor dejó al anterior (`target` -> `relatedTarget`).
 
 ```online
-En el siguiente ejemplo, cada cara y sus características son elementos separados. Cuando mueves el mouse, puedes ver los eventos del mouse que ocurren en el área de texto.
+En el siguiente ejemplo, cada cara y sus características son elementos separados. Puedes ver en el área de texto los eventos que ocurren cuando mueves el mouse.
 
-Cada evento tiene la información sobre ambos `target` y `relatedTarget`:
+Cada evento tiene la información sobre ambas propiedades: `target` y `relatedTarget`:
 
 [codetabs src="mouseoverout" height=280]
 ```
@@ -36,11 +36,11 @@ Eso es normal y solo significa que el mouse no vino de otro elemento, sino de la
 Debemos tener en cuenta esa posibilidad cuando usemos `event.relatedTarget` en nuestro código. Si accedemos a `event.relatedTarget.tagName` entonces habrá un error.
 ```
 
-## Saltando Elementos
+## Saltando elementos
 
-El evento `mousemove`  se activa cuando el mouse se mueve. Pero eso no significa que cada píxel nos lleve a un evento.
+El evento `mousemove`  se activa cuando el mouse se mueve pero eso no significa que cada píxel nos lleve a un evento.
 
-El navegador verifica la posición del mouse de vez en cuando. Y si nota cambios entonces activa los eventos.
+El navegador verifica la posición del mouse de vez en cuando y si nota cambios entonces activan los eventos.
 
 Eso significa que si el visitante mueve el mouse muy rápido, entonces algunos elementos del DOM podrían estar siendo ignorados:
 
@@ -48,7 +48,7 @@ Eso significa que si el visitante mueve el mouse muy rápido, entonces algunos e
 
 Si el mouse se mueve muy rápido de los elementos `#FROM` a `#TO`, como se muestra arriba, entonces los elementos intermedios `<div>` (o algunos de ellos) podrían ser ignorados. El evento `mouseout` se podría activar en `#FROM` e inmediatamente `mouseover` en `#TO`.
 
-Eso es bueno para el rendimiento porque puede haber muchos elementos intermedios. Realmente no queremos procesarlo todo dentro y fuera de cada uno.
+Eso es bueno para el rendimiento porque puede haber muchos elementos intermedios. Realmente no queremos procesar todo lo que sucede dentro y fuera de cada uno.
 
 Por otro lado, debemos tener en cuenta que el puntero del mouse no "visita" todos los elementos en el camino. Los puede "saltar".
 
@@ -59,9 +59,9 @@ En particular, es posible que el puntero salte dentro de la mitad de la página
 ```online
 Puedes verlo "en vivo" en un testeador a continuación.
 
-Este HTML tiene dos elementos: el `<div id="hijo">` está adentro del `<div id="padre">`. Si mueves el mouse rápidamente sobre ellos entonces probablemente solo el `div` hijo active los eventos, o probablemente el padre, o probablemente no ocurran eventos en lo absoluto.
+Este HTML tiene dos elementos: el `<div id="child">` está adentro del `<div id="parent">`. Si mueves el mouse rápidamente sobre ellos entonces probablemente solo el `div` hijo active los eventos, o probablemente el padre, o probablemente no ocurran eventos en lo absoluto.
 
-También mueva el cursor hacia el `div` hijo y luego muévalo rápidamente hacia abajo a través del padre. Si el movimiento es lo suficientemente rápido entonces el padre será ignorado. El mouse cruzará el elemento padre sin notarlo.
+También prueba a mover el cursor hacia el `div` hijo y luego muévelo rápidamente hacia abajo a través del padre. Si el movimiento es lo suficientemente rápido entonces el padre será ignorado. El mouse cruzará el elemento padre sin notarlo.
 
 [codetabs height=360 src="mouseoverout-fast"]
 ```
@@ -92,7 +92,7 @@ Entonces si se dirige hacia otro elemento (incluso uno anidado), está dejando a
 
 Por favor, note otro importante detalle sobre el procesamiento de eventos.
 
-El evento `mouseover` sobre un elemento anidado brota. Entonces si `#parent` tiene el cotrolador `mouseover`, se activa:
+El evento `mouseover` se aparece en un un elemento anidado (brota o nace, por decirlo así). Entonces si `#parent` tiene el cotrolador `mouseover`, se activa:
 
 ![](mouseover-bubble-nested.svg)
 
@@ -100,13 +100,13 @@ El evento `mouseover` sobre un elemento anidado brota. Entonces si `#parent` tie
 Puedes verlo muy bien a continuación: `<div id="child">` está dentro de`<div id="parent">`. Hay controladores `mouseover/out` en el elemento `#parent` que arrojan los detalles de los eventos.
 
 Si mueves el mouse de `#parent` a `#child`, verás dos eventos sobre `#parent`:
-1. `mouseout [target: parent]` (dejo al padre), luego
-2. `mouseover [target: child]` (vino hacia el hijo, brotó).
+1. `mouseout [target: parent]` (dejó al padre), luego
+2. `mouseover [target: child]` (vino hacia el hijo, y este evento brotó).
 
 [codetabs height=360 src="mouseoverout-child"]
 ```
 
-Como se muestra, cuando el puntero se mueve del elemento `#parent` a `#child`, los dos controladores se activan en el elemento padre: `mouseout` y `mouseover`:
+Como se muestra, cuando el cursor se mueve del elemento `#parent` a `#child`, los dos controladores se activan en el elemento padre: `mouseout` y `mouseover`:
 
 ```js
 parent.onmouseout = function(event) {
@@ -117,13 +117,13 @@ parent.onmouseover = function(event) {
 };
 ```
 
-**Si no examinamos `event.target` dentro de los controladores podría parecer que el puntero del  elemento `#parent` y volvió a él inmediatamente.**
+**Si no examinamos `event.target` dentro de los controladores podría parecer que el cursor dejo el elemento `#parent` y volvió a él inmediatamente.**
 
-Pero ese no es el caso. El puntero aún está sobre el elemento padre, simplemente se adentró más en el elemento hijo.
+Pero ese no es el caso. El cusor aún está sobre el elemento padre, simplemente se adentró más en el elemento hijo.
 
-Si hay algunas acciones al abandonar el elemento padre,por ejemplo: una animación se ejecuta con `parent.onmouseout`, usualmente no la queremos cuando el puntero se adentre más sobre `#parent`.
+Si hay algunas acciones al abandonar el elemento padre,por ejemplo: una animación se ejecuta con `parent.onmouseout`, usualmente no la queremos cuando el cursor se adentre más sobre `#parent`.
 
-Para evitar esto lo que podemos hacer es checar `relatedTarget` en el controlador y si el mouse aún permancece dentro del eelmento entonces ignorar dicho evento.
+Para evitar esto lo que podemos hacer es checar `relatedTarget` en el controlador y si el mouse aún permanece dentro del elemento entonces ignorar dicho evento.
 
 Alternativamente podemos usar otros eventos: `mouseenter` y `mouseleave`, los cuales cubriremos a continuación, ya que con ellos no hay tales problemas.
 
@@ -133,14 +133,14 @@ Los eventos `mouseenter/mouseleave` son como `mouseover/mouseout`. Se activan cu
 
 Pero hay dos diferencias importantes:
 
-1. Las transiciones hacía/desde los descendientes no se cuentan.
+1. Las transiciones hacia/desde los descendientes no se cuentan.
 2. Los eventos `mouseenter/mouseleave` no brotan.
 
 Son eventos extremadamente simples.
 
-Cuando el cursor entra en un elemento -- `mouseenter` se activa. La ubicación exacta del cursor dentro del elemento o sus descendientes no importa.
+Cuando el cursor entra en un elemento `mouseenter` se activa. La ubicación exacta del cursor dentro del elemento o sus descendientes no importa.
 
-Cuando el cursor deja el elemento -- `mouseleave` se activa.
+Cuando el cursor deja el elemento `mouseleave` se activa.
 
 ```online
 Este ejemplo es similar al anterior, pero ahora el elemento tiene `mouseenter/mouseleave` en lugar de `mouseover/mouseout`.
@@ -152,11 +152,11 @@ Como puedes ver, los únicos eventos generados son los relacionados con mover el
 
 ## Delegación de eventos
 
-Los eventos `mouseenter/leave` son muy simples de usar. Pero no brotan por sí solos. Por lo tanto no podemos usar la delagación de eventos con ellos.
+Los eventos `mouseenter/leave` son muy simples de usar. Pero no brotan por sí solos. Por lo tanto no podemos usar la delegación de eventos con ellos.
 
 Imagina que queremos manejar entrada/salida para celdas de tabla y hay cientos de celdas.
 
-La solución natural sería -- ajustar el controlador en `<table>` y manejar los eventos desde ahí. Pero `mouseenter/leave` no aparece. Entonces si cada evento sucede en `<td>`, solamente un controlador `<td>` es capaz de detectarlo.
+La solución natural sería: ajustar el controlador en `<table>` y manejar los eventos desde ahí. Pero `mouseenter/leave` no aparece. Entonces si cada evento sucede en `<td>`, solamente un controlador `<td>` es capaz de detectarlo.
 
 Los controladores `mouseenter/leave` en `<table>` solamente se activan cuando el cursor entra/deja la tabla completa. Es imposible obtener alguna información sobre las transiciones dentro de ella.
 
@@ -183,13 +183,13 @@ Aquí se muestran en acción. A medida que el mouse recorre los elementos de est
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
 ```
 
-En nuestro caso nos gustarías manejar las transiciones entre las celdas de la tabla `<td>`: entrando a una celda y saliendo de ella. Otras transiciones, como dentro de una celda o fuera de cualquiera de ellas no nos interesan. Vamos a filtrarlas.
+En nuestro caso nos gustaría manejar las transiciones entre las celdas de la tabla `<td>`: entradas y salidas de una celda a otra. Otras transiciones, como dentro de una celda o fuera de cualquiera de ellas no nos interesan. Vamos a filtrarlas.
 
 Esto es lo que podemos hacer:
 
 - Recordar el elemento `<td>` resaltado actualmente en una variable, llamémosla `currentElem`.
-- En `mouseover` -- ignorar el evento si permanecemos dentro del `<td>` actual.
-- En `mouseout` -- ignorar el evento si no hemos dejado el `<td>` actual.
+- En `mouseover` ignoraremos el evento si permanecemos dentro del `<td>` actual.
+- En `mouseout` ignoraremos el evento si no hemos dejado el `<td>` actual.
 
 Aquí hay un ejemplo de código que explica todas las situaciones posibles:
 
@@ -204,7 +204,7 @@ Aquí está el ejemplo completo con todos los detalles:
 
 [codetabs height=460 src="mouseenter-mouseleave-delegation-2"]
 
-Intenta mover el cursor dentro y fuera de las celdas de la tabla y dentro de ellas. Rápido o lento -- no importa --. Solo se ilumina `<td>` como un todo, a diferiencia del ejemplo anterior.
+Intenta mover el cursor dentro y fuera de las celdas de la tabla y dentro de cada una de ellas. Rápido o lento -- no importa --. Solo se ilumina `<td>` como un todo, a diferiencia del ejemplo anterior.
 ```
 
 ## Resumen
@@ -214,7 +214,7 @@ Hemos cubierto `mouseover`, `mouseout`, `mousemove`, `mouseenter` y`mouseleave`.
 Estas cosas son buenas de destacar:
 
 - Un movimiento rápido del mouse puede omitir elementos intermedios.
-- Los eventos `mouseover/out` y `mouseenter/leave` tienen una propiedad adicional: `relatedTarget`. Es el elemento de dónde venimos o hacia dónde vamos, complementario con `target`.
+- Los eventos `mouseover/out` y `mouseenter/leave` tienen una propiedad adicional: `relatedTarget`. Es el elemento de donde venimos o hacia donde vamos, complementario con `target`.
 
 Los eventos `mouseover/out` se activan incluso cuando vamos de un elemento padre a su descendiente. El navegador asume que de el mouse solo puede estar sobre un elemento a la vez -- el más interno.
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
index 459243e82..3c57c7043 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
@@ -3,7 +3,7 @@ let currentElem = null;
 
 table.onmouseover = function(event) {
   // antes de ingresar un uevo elemento, el mouse siempre abandonará al anterior
-  // si currentElem está establecido, no abdandonamos el <td> anterior,
+  // si currentElem está establecido, no abandonamos el <td> anterior,
   // hay un mouseover dentro de él, ignoramos el evento
   if (currentElem) return;
 
@@ -33,7 +33,7 @@ table.onmouseout = function(event) {
 
   while (relatedTarget) {
     // vamos a la cadena de padres y verificamos – si aún estamos dentro de currentElem
-    // entonces hay una transición interna – la ignramos
+    // entonces hay una transición interna – la ignoramos
     if (relatedTarget == currentElem) return;
 
     relatedTarget = relatedTarget.parentNode;
@@ -48,7 +48,7 @@ table.onmouseout = function(event) {
 function onEnter(elem) {
   elem.style.background = 'pink';
 
-  // lo mostramos en el area de texto
+  // lo mostramos en el área de texto
   text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`;
   text.scrollTop = 1e6;
 }
diff --git a/2-ui/3-event-details/index.md b/2-ui/3-event-details/index.md
index e3f7aa297..5bc5ec34f 100644
--- a/2-ui/3-event-details/index.md
+++ b/2-ui/3-event-details/index.md
@@ -1,3 +1,3 @@
 # Eventos en la UI
 
-Aquí cubriremos los eventos más importantes de la interfaz de usuario y cómo trabajar con ellos.
+Aquí cubriremos los eventos más importantes de la interfaz de usuario y cómo podemos trabajar con ellos.