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..671bf6efd 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 */
+      /* تولتیپ باید بعد از پیمایش صفحه هم کار کند */
     }
 
     .tooltip {
@@ -49,16 +49,16 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="این نمای داخلی خانه است" id="house">
+    <div data-tooltip="این سقف است" id="roof"></div>
+    
+    <p>روزی روزگاری مامان خوکه سه تا بچه کوچک داشت.</p>
 
-    <p>Once upon a time there was a mother pig who had three little pigs.</p>
+    <p>اون سه تا خوک کوچک انقدر بزرگ شدند که مادرشون به اونها گفت: "شما خیلی بزرگ شدید و دیگه نمی‌تونید اینجا زندگی کنید. باید برید و خونه‌های خودتون رو بسازید. اما مراقب باشید که گرگه شمارو شکار نکنه."</p>
+    
+    <p>سه خوک کوچک راه افتادند و رفتند. اونها به مادرشون گفتند: "ما مراقب هستیم تا گرگه مارو شکار نکنه."</p>
 
-    <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
-
-    <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>بعد از مدت کوتاهی مردی رو دیدند. <a href="https://fa.wikipedia.org/wiki/%D8%B3%D9%87_%D8%AE%D9%88%DA%A9_%D9%81%D8%B3%D9%82%D9%84%DB%8C" data-tooltip="ادامه را بخوانید">اشاره‌گر را روی من بیار</a></p>
 
   </div>
 
@@ -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.
+      // نکته مهم: یک حرکت سریع اشاره‌گر موس ممکن است با نادیده گرفتن پدر، مستقیما روی خود فرزند "پرش" کند
+      // پس رویداد mouseover ممکن است روی فرزند اتفاق بیفتد.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
       if (!anchorElem) return;
 
-      // show tooltip and remember it
+      // نمایش تولتیپ و ذخیره کردن آن در یک متغیر
       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
+      // ممکن است که mouseout اتفاق بیفتد ولی ما هنوز داخل عنصر باشیم.
+      // (یعنی که target داخل عنصر دیگری بوده، و رویداد بالا رفته است)
+      // اما در این صورت ما یک mouseover لحظه‌ای داریم،
+      // پس تولتیپ ازبین می‌رود و دوباره نمایش داده می‌شود
       //
-      // luckily, the "blinking" won't be visible,
-      // as both events happen almost at the same time
+      // خوشبختانه، این "چشمک زدن" معلوم نیست.
+      // چون هر دو رویداد تقریبا در یک زمان واحد اتفاق می‌افتند
       if (tooltip) {
         tooltip.remove();
         tooltip = false;
@@ -101,7 +101,7 @@
 
       let coords = anchorElem.getBoundingClientRect();
 
-      // position the tooltip over the center of the element
+      // نمایش تولتیپ وسط عنصر
       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..511ca1b9a 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
@@ -49,21 +49,21 @@
 <body>
 
 
-  <div data-tooltip="Here is the house interior" id="house">
-    <div data-tooltip="Here is the roof" id="roof"></div>
+  <div data-tooltip="این نمای داخلی خانه است" id="house">
+    <div data-tooltip="این سقف است" id="roof"></div>
+    
+    <p>روزی روزگاری مامان خوکه سه تا بچه کوچک داشت.</p>
 
-    <p>Once upon a time there was a mother pig who had three little pigs.</p>
+    <p>اون سه تا خوک کوچک انقدر بزرگ شدند که مادرشون به اونها گفت: "شما خیلی بزرگ شدید و دیگه نمی‌تونید اینجا زندگی کنید. باید برید و خونه‌های خودتون رو بسازید. اما مراقب باشید که گرگه شمارو شکار نکنه."</p>
+    
+    <p>سه خوک کوچک راه افتادند و رفتند. اونها به مادرشون گفتند: "ما مراقب هستیم تا گرگه مارو شکار نکنه."</p>
 
-    <p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."
-
-    <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>بعد از مدت کوتاهی مردی رو دیدند. <a href="https://fa.wikipedia.org/wiki/%D8%B3%D9%87_%D8%AE%D9%88%DA%A9_%D9%81%D8%B3%D9%82%D9%84%DB%8C" data-tooltip="ادامه را بخوانید">اشاره‌گر را روی من بیار</a></p>
 
   </div>
 
   <script>
-    // ...your code...
+    // ...کد شما...
   </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..b20c190fc 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
+# رفتار یک تولتیپ پیشرفته
 
-Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
+کد جاوا اسکریپیتی بنویسید که یک تولتیپ را با استفاده از صفت `data-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.
+این تکلیف شبیه تکلیف <info:task/behavior-tooltip> است، اما عناصری که توضیح اضافه دارند، می‌توانند تو در تو باشند. به این صورت که داخلی‌ترین تولتیپ باید نمایش داده شود.
 
-Only one tooltip may show up at the same time.
+فقط یک تولتیپ می‌تواند در لحظه باید نمایان باشد.
 
-For instance:
+برای مثال:
 
 ```html
-<div data-tooltip="Here – is the house interior" id="house">
-  <div data-tooltip="Here – is the roof" id="roof"></div>
+<div data-tooltip="اینجا – نمای داخلی خانه است" id="house">
+  <div data-tooltip="اینجا – سقف است" 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://fa.wikipedia.org/wiki/%D8%B3%D9%87_%D8%AE%D9%88%DA%A9_%D9%81%D8%B3%D9%82%D9%84%DB%8C" data-tooltip="ادامه را بخوانید">اشاره‌گر را روی من بیار</a>
 </div>
 ```
 
-The result in iframe:
+نتیجه داخل iframe:
 
 [iframe src="solution" height=300 border=1]
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..2f5ae84ee 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`.
+الگوریتم ساده به نظر می‌رسد:
+1. برای رویدادهای `onmouseover/out` کنترل‌کننده‌هایی روی عنصر تعریف می‌کنیم. همچنین می‌توانیم از ‍‍‍`onmouseenter/leave` نیز در این مورد استفاده کنیم، اما کمتر استفاده می‌شوند. درصورتی که از واگذاری رویدادها استفاده کنیم، کار نمی‌کنند.
+2. زمانی که اشاره‌گر موس وارد یک عنصر می‌شود، سرعت آن را در `mousemove` محاسبه می‌کنیم.
+3. اگر سرعت حرکت آن کند باشد، تابع `over` را صدا می‌زنیم.
+4. زمانی که از عنصر خارج می‌شویم، و `over` صدا زده شده بود، تابع `out`‌ را نیز صدا می‌زنیم.
 
-But how to measure the speed?
+اما چگونه سرعت اشاره‌گر موس را اندازه گیری کنیم؟
 
-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.
+اولین چیزی که به ذهن می‌رسد این است که: یک تابع را هر `‍100ms‍` اجرا کنیم و مسافتی که بین مختصات قبلی و جدید طی شده را اندازه بگیریم. اگر کوچک باشد، پس سرعت حرکت اشاره‌گر موس کند بوده.
 
-Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
+متاسفانه راهی برای گرفتن  "مختصات فعلی اشاره‌گر موس" در جاوا اسکریپت وجود ندارد. هیچ تابع از قبل آماده‌ای مانند `getCurrentMouseCoordiantes()` وجود ندارد.
 
-The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object.
+تنها راه برای گرفتن مختصات گوش دادن  به رویدادهای موس مانند `mousemove` و گرفتن مختصات از شئ event خواهد بود.
 
-So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
+درنتیجه باید برای رویداد `mousemove` یک کنترل‌کننده تعریف می‌کنیم تا مختصات را ذخیره کنیم، و آنها را هر `100ms` مقایسه کنیم.
 
-P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
+پی‌نوشت: توجه کنید که برای آزمایش راه حل از `dispatchEvent` استفاده می‌شود تا ببیند تولتیپ به درستی کار می‌کند یا نه.
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..fe00ec954 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, // سرعتی کمتر از 0.1px/ms به این معنی است که "اشاره‌گر موس روی عنصر قرار گرفته"
+    interval = 100,    // سرعت موس هر 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.
+    // مطمئن شویم که "this" در کنترل‌کننده‌های رویدادها وجود خواهد داشت
     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)
+    // و همچنین در تابع اندازه‌گیری زمان (که درون setInterval صدا زده می‌شود)
     this.trackSpeed = this.trackSpeed.bind(this);
 
     elem.addEventListener("mouseover", this.onMouseOver);
@@ -52,13 +52,13 @@ class HoverIntent {
   }
 
   onMouseOut(event) {
-    // if left the element
+    // اگر اشاره‌گر موس عنصر را ترک کند
     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
+        // اگر روی عنصر یک توقف وجود داشته باشد
         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
+      // اشاره‌گر حرکتی نداشته
       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
+      // سرعت بالا، مختصات فعلی را برای اندازه‌گیری بعدی ذخیره می‌کنیم
       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/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
index 098232174..c1d11e060 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
@@ -17,7 +17,7 @@
     <span class="seconds">00</span>
   </div>
 
-  <div id="tooltip" hidden>Tooltip</div>
+  <div id="tooltip" hidden>تولتیپ</div>
 
   <script>
     new HoverIntent({
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..86990e0f0 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
+// طرح کوتاهی از کلاسی که باید بنویسید
+// با چیزهایی که به هر حال به آنها نیاز پیدا خواهید کرد
 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, // سرعتی کمتر از 0.1px/ms به این معنی است که "اشاره‌گر موس روی عنصر قرار گرفته"
+    interval = 100, // سرعت اشاره‌گر موس هر 100ms یکبار چک می‌شود: مسافت طی شده بین مختصات قبلی و کنونی محسابه شود
     elem,
     over,
     out
@@ -17,16 +17,16 @@ class HoverIntent {
     this.over = over;
     this.out = out;
 
-    // make sure "this" is the object in event handlers.
+    // مطمئن شویم که "this" در کنترل‌کننده‌های رویدادها وجود خواهد داشت
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseOver = this.onMouseOver.bind(this);
     this.onMouseOut = this.onMouseOut.bind(this);
 
-    // assign the handlers
+    // کنترل‌کننده‌ها را به عنصر متصل می‌کنیم
     elem.addEventListener("mouseover", this.onMouseOver);
     elem.addEventListener("mouseout", this.onMouseOut);
 
-    // continue from this point
+    // از اینجا شروع کنید
 
   }
 
@@ -44,8 +44,8 @@ class HoverIntent {
 
 
   destroy() {
-    /* your code to "disable" the functionality, remove all handlers */
-    /* it's needed for the tests to work */
+    /* کدی که برای "غیرفعال" کردن عملکرد تولتیپ می‌نویسید، همه کنترل‌کننده‌ها را از روی عنصر حذف کنید */
+    /* برای آزمایش راه حل شما نیاز است */
   }
 
 }
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..1653968c8 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
@@ -2,30 +2,30 @@ importance: 5
 
 ---
 
-# "Smart" tooltip
+# تولتیپ "باهوش"
 
-Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*.
+تابعی بنویسید که یک تولتیپ را فقط در صورتی نمایش دهد که کاربر اشاره‌گر موس را *داخل آن* ببرد و نه اینکه از روی آن *فقط عبور* کند.
 
-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?
+به عبارت دیگر، اگر که کاربر اشاره‌گر موس را روی عنصر ببرد و آنجا متوقف شود، تولتیپ نمایش داده شود. و اگر موس از روی عنصر عبور کرد، نیازی به نمایش تولتیپ نیست. چه کسی یک به تولتیپ لحظه‌ای نیاز دارد؟
 
-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.
+از نظر فنی، می‌توانیم سرعت اشاره‌گر موس را روی عنصر اندازه بگیریم، و اگر آرام باشد فرض کنیم که اشاره‌گر "روی عنصر قرار گرفته" و تولتیپ را نمایش دهیم. اگر سریع بود، آنرا نادیده بگیریم.
 
-Make a universal object `new HoverIntent(options)` for it.
+برای این منظور یک شئ گلوبال به صورت `new HoverIntent(options)` بسازید.
 
-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).
+خصوصیات `options`:
+- `elem` -- عنصری که می‌خواهیم حرکت اشاره‌گر را روی آن کنترل کنیم.
+- `over` -- تابعی که در صورت "قرار گرفتن اشاره‌گر روی عنصر" صدا زده می‌شود: که یعنی حرکت اشاره‌گر موس کند بوده، یا روی عنصر توقف کرده.
+- `out` -- تابعی که زمانی اشاره‌گر موس عنصر را ترک می‌کند صدا زده‌ می‌شود. (اگر تابع `over` صدا زده شده باشد).
 
-An example of using such object for the tooltip:
+یک مثال از چگونگی استفاده از چنین شئ برای تولتیپ این چنین خواهد بود:
 
 ```js
-// a sample tooltip
+// تولتیپ نمونه
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";
 
-// the object will track mouse and call over/out
+// این شئ حرکت اشاره‌گر موس را دنبال و توابع over/out را صدا می‌زند.
 new HoverIntent({
   elem,
   over() {
@@ -39,10 +39,10 @@ new HoverIntent({
 });
 ```
 
-The 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.
+اگر که اشاره‌گر موس را سریعا از روی "ساعت" حرکت دهید، اتفاقی نمی‌افتد، اگر چه در صورتی که حرکت اشاره‌گر موس آهسته باشد یا روی آن توقف کنید، یک تولتیپ نمایش داده می‌شود.
 
-Please note: the tooltip doesn't "blink" when the cursor moves between the clock subelements.
+توجه: تولتیپ نباید هنگامی که اشاره‌گر روی فرزندان ساعت حرکت می‌کند رفتار "چشمک زن" داشته باشد.
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 d409c3f12..a1283c547 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
+# حرکت موس: روی/بیرون‌از عنصر، ورود/خروج‌از عنصر
 
-Let's dive into more details about events that happen when the mouse moves between elements.
+اکنون درباره رویدادهایی که با حرکت موس بین عناصر صفحه اتفاق می‌افتد، بیشتر صحبت میکنیم.
 
-## Events mouseover/mouseout, relatedTarget
+## رویدادهای mouseover/mouseout, relatedTarget
 
-The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
+رویداد `mouseover` زمانی اتفاق می‌افتد که اشاره‌گر موس روی یک عنصر می‌رود, و `mouseout` -- زمانی که از روی آن بیرون می‌رود.
 
 ![](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`.
+این‌ها رویدادهای خاصی هستند، زیرا یک خاصیت به نام `relatedTarget` دارند. این خاصیت به نوعی مکمل `target` خواهد بود. زمانی که اشاره‌گر موس یک عنصر را با ورودی به عنصر دیگر ترک می‌کند، یکی از آن‌ها `target`، و دیگری `relatedTarget` خواهد بود.
 
-For `mouseover`:
+برای `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` -- عنصری خواهدبود که اشاره‌گر موس روی آن رفته‌است.
+- `event.relatedTarget` -- عنصری خواهد بود که اشاره‌گر موس آنرا ترک کرده، به صورت: (`relatedTarget` -> `target`).
 
-For `mouseout` the reverse:
+برای `mouseout` برعکس است:
 
-- `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` -- عنصری خواهد بود که اشاره‌گر موس آنرا ترک‌کرده.
+- `event.relatedTarget` -- عنصری خواهد بود که زیر اشاره‌گر موس قرار می‌گیرد، به صورت: (`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.
+در مثال زیر هر چهره و اجزای آن عناصر جداگانه هستند. زمانی که اشاره‌گر موس‌ را روی آن‌ها حرکت دهید، رویدادهایی که اتفاق می‌افتند را مشاهده خواهید کرد.
 
-Each event has the information about both `target` and `relatedTarget`:
+هر رویداد اطلاعاتی درباره هر دو `target` و `relatedTarget` دارد:
 
 [codetabs src="mouseoverout" height=280]
 ```
 
-```warn header="`relatedTarget` can be `null`"
-The `relatedTarget` property can be `null`.
+```warn header="`relatedTarget` می‌تواند `null` باشد"
+خاصیت `relatedTarget` می‌تواند است `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.
+این عادی است و فقط به این معنی است که اشاره‌گر موس از عنصر دیگری نیامده، بلکه از خارج از پنجره مرورگر وارد شده. یا اینکه با خارج شدن، از پنجره مرورگر خارج شده.
 
-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.
+ما باید این احتمال را هنگام استفاده از `event.realtedTarget` در کد به یاد داشته باشیم. اگر ما سعی کنیم که `event.relatedTarget.tagName` دسترسی پیدا کنیم، با خطا مواجه خواهیم شد.
 ```
 
-## Skipping elements
+## پرش از روی عناصر
 
-The `mousemove` event triggers when the mouse moves. But that doesn't mean that every pixel leads to an event.
+رویداد `mousemove` زمانی اتفاق می‌افتد که اشاره‌گر موس حرکت کند. اما به این معنی نیست که برای هر پیکسل این رویداد اتفاق بیفتد.
 
-The browser checks the mouse position from time to time. And if it notices changes then triggers the events.
+مرورگر موقعیت اشاره‌گر موس را هرچند وقت بسیار کوتاه یکبار چک می‌کند. و اگر تغییری را ببیند رویداد را صدا می‌زند.
 
-That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped:
+به این معنی که اگر بازدیدکننده موس را سریع حرکت دهد، ممکن است بعضی از عناصر داخل DOM از قلم بیفتند:
 
 ![](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`.
+اگر که موس از `#FROM` سریعا به `#TO` حرکت کند، مانند شکل بالا، عناصر `<div>` وسطی (یا بعضی از آن‌ها) ممکن‌است از قلم بیفتند. رویداد `mouseout` ممکن است روی `#FROM` و بعد از آن سریعا `mouseover` روی `#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.
+این برای کارایی برنامه خوب است، چون ممکن است از روی تعداد زیاد عنصر بین دو عنصر عبور کند. در عمل معمولا نمی‌خواهیم همه‌ای این ورود و خروج از تک تک عناصر را پردازش کنیم.
 
-On the other hand, we should keep in mind that the mouse pointer doesn't "visit" all elements along the way. It can "jump".
+از طرف دیگر، باید در نظر داشته باشیم که اشاره‌گر موس همیشه همه‌ی عناصر را در طول مسیر حرکتش "ملاقات" نمی‌کند. ممکن است "پرش" کند.
 
-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":
+در حالت خاصی، ممکن است که اشاره‌گر موس از بیرون از پنجره مرورگر، دقیقا داخل یک عنصر پرش کند. در این حالت `realtedTarget` مقدار `null` خواهد داشت، چون اشاره‌گر عملا از "ناکجا آباد" آمده است:
 
 ![](mouseover-mouseout-from-outside.svg)
 
 ```online
-You can check it out "live" on a teststand below.
+می‌توانید این رفتار را به صورت زنده در قسمت آزمایشی زیر ببینید.
 
-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.
+کد اچ‌تی‌ام‌ال دارای دو عنصر تو در تو است: عنصر `<div id="child">` داخل عنصر `<div id="parent">` قرار گرفته است. اگر که اشاره‌گر موس را سریعا روی آنها حرکت دهید، ممکن است که فقط عنصر فرزند رویداد را صدا بزند، یا شاید عنصر پدر، حتی ممکن است اصلا رویداد اتفاق نیفتد.
 
-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.
+همچنین اشاره‌گر را داخل `div` فرزند ببرید، و سپس آنرا از روی عنصر پدر، با پایین بردن اشاره‌گر از روی عنصر فرزند خارج کنید. اگر حرکت به اندازه کافی سریع باشد، عنصر پدر نادیده گرفته خواهد شد. اشاره‌گر موس از روی عنصر پدر بدون توجه به آن عبور می‌کند.
 
 [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="اگر `mouseover` اتفاق بیفتد, حتما `mouseout` اتفاق خواهد افتاد"
+در صورت حرکت سریع اشاره‌گر موس، عناصر بین حرکت ممکن است نادیده گرفته‌‌شوند، اما چیزی که از آن مطمئن هستیم این است که: اگر اشاره‌گر موس "رسما" وارد یک عنصر شود (رویداد `mouseover` اتفاق بیفتند)، هنگام ترک این عنصر همیشه رویداد `mouseout` نیز اتفاق خواهد افتاد.
 ```
 
-## Mouseout when leaving for a child
+## رویداد mouseout وقتی اشاره‌گر وارد عنصر فرزند می‌شود
 
-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:
+یک ویژگی مهم `mouseout` این است که زمانی که از یک عنصر به فرزندان آن برویم، اتفاق می‌افتد. برای مثال در اچ‌تی‌ام‌ال زیر زمانی که از `#parent` به `#child` برویم:
 
 ```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`, we get `mouseout` on `#parent`!
+اگر روی `#parent` باشیم و سپس اشاره‌گر موس را داخل‌تر و داخل `#child` ببریم، رویداد `mouseout` روی `#parent` اتفاق می‌افتد.
 
 ![](mouseover-to-child.svg)
 
-That may seem strange, but can be easily explained.
+ممکن‌ است عجیب باشد، اما به سادگی شرح داده می‌شود.
 
-**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.**
+**با توجه به منطق مرورگر، اشاره گر موس این امکان را دارد که فقط بالای *یک* عنصر در یک زمان واحد باشد. داخلی‌ترین و بالاترین به واسطه z-index.**
 
-So if it goes to another element (even a descendant), then it leaves the previous one.
+پس اگر داخل یک عنصر دیگر (حتی فرزند) شود، پس از قبلی بیرون می‌رود.
 
-Please note another important detail of event processing.
+به این نکته دیگر درباره جزئیات پردازش رویدادها دقت کنید.
 
-The `mouseover` event on a descendant bubbles up. So, if `#parent` has `mouseover` handler, it triggers:
+رویداد `mouseover` زمانی که روی یک فرزند اتفاق بیفتد، به اطلاح بالا می‌رود. به این معنی که اگر `parent` یک کنترل‌کننده برای رویداد `mouseover` داشته باشد، فراخوانی ‌می‌شود:
 
 ![](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.
+در مثال زیر به خوبی می‌توانید ببینید: `<div id="child">` داخل `<div id="parent">` قرار دارد. برای رویدادهای `mouseover/out` کنترل‌کننده‌هایی روی `#parent` تعریف شده که جزئیاتی درباره رویداد را در خروجی نمایش می‌دهد.
 
-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).
+اگر اشاره‌گر موس را از روی `#parent` حرکت دهید و روی `#child` ببرید، دو رویداد را روی `#parent` خواهید دید:
+1. `mouseout [target: parent]` (ترک پدر), سپس
+2. `mouseover [target: child]` (ورود به فرزند, اصطلاحا بالا رفته).
 
 [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`:
+همانطور که نشان داده‌شد، زمانی که اشاره‌گر موس از `#parent` بیرون و روی `#child` می‌رود، هر دو کنترل کننده پدر فراخوانده می‌شوند: `mouseout` و `mouseover`:
 
 ```js
 parent.onmouseout = function(event) {
-  /* event.target: parent element */
+  /* event.target: عنصر پدر */
 };
 parent.onmouseover = function(event) {
-  /* event.target: child element (bubbled) */
+  /* event.target: عنصر فرزند (اصطلاحا بالا رفته) */
 };
 ```
 
-**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.**
+**اگر که `event.target` را داخل کنترل‌کننده‌ها بررسی نکنیم، به نظر می‌رسد که موس `#parent` را ترک‌ کرده و سپس سریعا روی آن برگشته است.**
 
-But that's not the case! The pointer is still over the parent, it just moved deeper into the child element.
+اما این‌گونه نیست! اشاره‌گر موس هنوز روی عنصر پدر قراردارد، فقط وارد وارد عنصر فرزند  که داخلی‌تر است شده.
 
-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`.
+اگر زمان خروج از عنصر پدر قرار است، کاری انجام شود، برای مثال انیمیشنی در زمان `parent.onmouseout` اجرا شود، معمولا نمیخواهیم که زمانی که موس داخل عناصر داخلی‌تر `#parent` می‌شود، این کار انجام شود.
 
-To avoid it, we can check `relatedTarget` in the handler and, if the mouse is still inside the element, then ignore such event.
+برای جلوگیری از این رفتار، ما `relatedTarget` را در کنترل کننده چک می‌کنیم. اگر که اشاره‌گر موس هنوز داخل عنصر بود، پس صرفا رویداد را نادیده می‌گیریم.
 
-Alternatively we can use other events: `mouseenter` and `mouseleave`, that we'll be covering now, as they don't have such problems.
+می‌توانیم از دو رویداد دیگر نیز استفاده کنیم: `mouseenter` و `mouseleave`، که اکنون به آنها می‌پردازیم،‌ چنین مشکلاتی را باعث نمی‌شوند.
 
-## Events mouseenter and mouseleave
+## رویدادهای mouseenter و mouseleave
 
-Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They trigger when the mouse pointer enters/leaves the element.
+رویدادهای `mouseenter/mouseleave` مشابه `mouseover/mouseout` هستند. زمانی اتفاق می‌افتند که اشاره‌گر وارد یک عنصر، یا از آن خارج می‌شود.
 
-But there are two important differences:
+اما دو تفاوت اساسی وجود دارد:
 
-1. Transitions inside the element, to/from descendants, are not counted.
-2. Events `mouseenter/mouseleave` do not bubble.
+1. گذرهای داخل عنصر، از\به فرزندها در نظر گرفته ‌نمی‌شوند.
+2. رویداد‌های `mouseenter/mouseleave` به اصطلاح بالا نمی‌روند.
 
-These events are extremely simple.
+این رویدادها بسیار ساده هستند.
 
-When the pointer enters an element -- `mouseenter` triggers. The exact location of the pointer inside the element or its descendants doesn't matter.
+زمانی که اشاره‌گر موش وارد یک عنصر شود، ‍`mouseenter` اتفاق می‌افتد. محل دقیق اشاره‌گر داخل عنصر یا فرزندهای آن مهم نیست.
 
-When the pointer leaves an element -- `mouseleave` triggers.
+زمانی که اشاره‌گر از یک عنصر خارج شود، `mouseleave` اتفاق می‌افتد.
 
 ```online
-This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`.
+این مثال شبیه بالایی است، اما عنصر پدر به رویدادهای `mouseenter/mouseleave` به جای `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
+همانطور که می‌بینید، تنها رویدادهایی که ایجاد می‌شوند،‌آنهایی هستند که به واسطه ورود و خروج اشاره‌گر موس از عنصر پدر اتفاق می‌افتند. زمانی که اشاره‌گر موس وارد عنصر فرزند و از آن خارج می‌شود اتفاقی نمی‌افتد. گذرهایی بین فرزندها اتفاق می‌افتد نادیده گرفته می‌شوند.
 
 [codetabs height=340 src="mouseleave"]
 ```
 
-## Event delegation
+## واگذاری رویداد
 
-Events `mouseenter/leave` are very simple and easy to use. But they do not bubble. So we can't use event delegation with them.
+رویدادهای `mouseenter/leave` بسیار ساده و برای استفاده ساده هستند. اما بالا نمی‌روند. پس نمی‌تواتیم برای آنها از واگذاری رویدادها استفاده کنیم.
 
-Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells.
+تصور کنید که می‌خواهیم ورود/خروج اشاره‌گر موس برای سلول‌های جدول کنترل کنیم. و صدها سلول وجود دارد.
 
-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.
+طبیعتا راه حلی که ابتدا به ذهن می‌رسد این است که کنترل‌کننده را روی `<table>` تنظیم کنیم و رویدادها را درون آن پردازش کنیم. اما رویدادهای `mouseenter/leave` بالا نمی‌روند. پس اگر چنین رویدادی روی `<td>` اتفاق بیفتد، فقط کنترل‌کننده‌ای که روی آن `<td>` می‌تواند متوجه این رویداد شود.
 
-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.
+کنترل‌کننده‌هایی که برای `mouseenter/leave` روی `<table>` وجود دارند، تنها زمانی صدا زده‌ ‌می‌شوند که اشاره‌گر موس وارد/خارج جدول کلی شود. در این صورت گرفتن اطلاعات درباره گذرهایی که درون خود جدول اتفاق می‌افتد غیر ممکن خواهد بود.
 
-So, let's use `mouseover/mouseout`.
+پس، از `mouseover/mouseout` استفاده می‌کنیم.
 
-Let's start with simple handlers that highlight the element under mouse:
+با یک کنترل‌کننده ساده که تنها عنصر زیر اشاره‌گر موس را مشخص می‌کند شروع کنیم:
 
 ```js
-// let's highlight an element under the pointer
+// مشخص کردن عنصر زیر اشاره‌گر موس
 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:
+در اینجا می‌توانید چیزی که اتفاق می‌افتد را ببینید. با حرکت اشاره‌گر موس روی عناصر این جدول، عنصر کنونی که زیر اشاره‌گر موس است مشخص می‌شود:
 
 [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.
+در این حالت ما می‌خواستیم که گذرهایی که بین سلول‌های جدول `<td>` اتفاق می‌افتد را کنترل کنیم: ورود به یک سلول جدول و خروج از آن. بقیه‌ی گذرها، مانند درون یک سلول، یا خارج هر سلول، به ما کمکی نمی‌کند. پس بیایید آنها را پالایش کنیم.
 
-Here's what we can do:
+کاری که می‌توانیم انجام دهیم این است:
 
-- 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>`.
+- عنصر کنونی مشخص شده `<td>` را درون یک متغیر ذخیره کنیم. آنرا `currentElem` می‌نامیم.
+- در هنگام `mouseover`، رویداد را در صورتی که هنوز داخل عنصر `<td>` کنونی باشیم، نادیده می‌گیریم.
+- در هنگام `mouseout`، رویداد را در صورتی که عنصر `<td>` کنونی را ترک نکرده باشیم، نادیده می‌گیریم.
 
-Here's an example of code that accounts for all possible situations:
+این مثال تمام حالاتی که ممکن است اتفاق بیفتند حساب کرده است:
 
 [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.
+بار دیگر، ویژگی‌های مهم عبارت‌اند از:
+1. برای کنترل ورود/خروج اشاره‌گر موس از هر `<td>` درون جدول، از واگذاری رویداد استفاده می‌شود. پس از `mouseover/out` بجای `mouseenter/leave` برای این منظور استفاده می‌شود.
+2. رویدادهای اضافی، مانند حرکت موس بین فرزندهای خود `<td>` پالایش شده‌اند، به طوری که `onEnter/Leave` تنها زمانی اجرا می‌شوند که اشاره‌گر موس وارد/خارج کل `<td>` شود.
 
 ```online
-Here's the full example with all details:
+در اینجا مثال کاملی همراه با تمام جزئیات آمده است:
 
 [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.
+اشاره‌گر موس را رو و بیرون سلول‌های جدول ببرید. سریع یا آسان، اهمیتی ندارد. کل `<td>` مشخص خواهد شد، برخلاف مثالی که قبلا دیده بودیم.
 ```
 
-## Summary
+## خلاصه
 
-We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`.
+ما درباره رویدادهای `mouseover`، `mouseout`، `mousemove`، `mouseenter` و `mouseleave` صحبت کردیم.
 
-These things are good to note:
+خوب است به این نکات توجه کنیم:
 
-- 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`.
+- یک حرکت سریع موس ممکن است باعث پرش از روی عناصر بین حرکت شود.
+- رویدادهای `mouseover/out` و `mouseenter/leave` یک خاصیت اضافی دارند: `relatedTarget`. که عنصری خواهد بود که وارد/خارج آن می‌شویم، و به نوعی مکمل `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.
+رویدادهای `mouseover/out` زمانی که ما از عنصر پدر به فرزند برویم هم اتفاق می‌افتند. مرورگر فرض می‌کند که اشاره‌گر موس در یک زمان فقط می‌تواند روی یک عنصر باشد، داخلی‌ترین عنصر.
 
-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.
+اما رویدادهای `mouseenter/leave‍` از این نظر متفاوت عمل می‌کنند: آنها فقط زمانی اتفاق می‌افتند که اشاره‌گر موس وارد یا یک عنصر به عنوان یک کل خارج شود. همچنین آنها اصطلاحا، بالا نمی‌روند.
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
index eedd38716..f6d1b069b 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
@@ -11,57 +11,57 @@
 
   <table id="table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3"><em>باگوآ</em> جدول: جهت, عنصر, رنگ, مفهوم</th>
     </tr>
     <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
+      <td class="nw"><strong>شمال غرب</strong>
+        <br>فلز
+        <br>نقره
+        <br>ریش سفیدان
       </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
+      <td class="n"><strong>شمال</strong>
+        <br>آب
+        <br>آبی
+        <br>تحول
       </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
+      <td class="ne"><strong>شمال شرق</strong>
+        <br>زمین
+        <br>زرد
+        <br>جهت
       </td>
     </tr>
     <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
+      <td class="w"><strong>غرب</strong>
+        <br>فلز
+        <br>طلا
+        <br>جوان
       </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
+      <td class="c"><strong>وسط</strong>
+        <br>همه‌چیز
+        <br>بنفش
+        <br>توازن
       </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
+      <td class="e"><strong>شرق</strong>
+        <br>چوب
+        <br>آبی
+        <br>آبی
       </td>
     </tr>
     <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
+      <td class="sw"><strong>جنوب غرب</strong>
+        <br>زمین
+        <br>قهوه‌ای
+        <br>آرامش
       </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
+      <td class="s"><strong>جنوب</strong>
+        <br>آتش
+        <br>نارنجی
+        <br>سربلندی
       </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
+      <td class="se"><strong>جنوب شرقی</strong>
+        <br>چوب
+        <br>سبز
+        <br>افسانه
       </td>
     </tr>
 
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..a64a2faa3 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)
+// <td> که هم اکنون زیر موس قرار دارد (در صورت وجود)
 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
+table.onmouseover = function (event) {
+  // قبل از ورود به عنصر جدید، اشاره‌گر موس همیشه قبلی را ترک می‌کند
+  // اگر currentElem مقدار داشته باشد، پس ما <td> قبلی را ترک نکرده‌ایم،
+  // که یعنی یک رویداد mouseover درون آن رخ داده، پس آنرا نادیده می‌گیریم.
   if (currentElem) return;
 
   let target = event.target.closest('td');
 
-  // we moved not into a <td> - ignore
+  // وارد یک <td> نشده پس آنرا نادیده می‌گیریم
   if (!target) return;
 
-  // moved into <td>, but outside of our table (possible in case of nested tables)
-  // ignore
+  // وارد یک <td> شده، اما نه درون جدول مورد نظر ما (در صورتی که جدول‌های تو در تو داشته باشیم این امکان وجود دارد)
+  // نادیده می‌گیریم
   if (!table.contains(target)) return;
 
-  // hooray! we entered a new <td>
+  // هوورا! ما وارد یک <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>
+table.onmouseout = function (event) {
+  // اگر که ما اکنون بیرون هر یک از <td> باشیم، پس این رویداد را نادیده می‌گیریم
+  // احتمالا اشاره‌گر موس وارد یک جدول شده اما هنوز بیرون از <td> است،
+  // مثلا از یک <tr> به <tr> دیگر
   if (!currentElem) return;
 
-  // we're leaving the element – where to? Maybe to a descendant?
+  // ما در حال ترک عنصر هستیم، اما به کجا؟ شاید به یک فرزند؟
   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
+    // زنجیره پدر-فرزندی را بالا می‌رویم و چک می‌کنیم که آیا هنوز داخل currentElem هستیم یا نه
+    // در این صورت این یک گذر داخلی است، که آنرا نادیده می‌گیریم
     if (relatedTarget == currentElem) return;
 
     relatedTarget = relatedTarget.parentNode;
   }
 
-  // we left the <td>. really.
+  // ما واقعا <td> را ترک کردیم
   onLeave(currentElem);
   currentElem = null;
 };
 
-// any functions to handle entering/leaving an element
+// هر تابعی برای کنترل ورود/خروج یک عنصر
 function onEnter(elem) {
   elem.style.background = 'pink';
 
-  // show that in textarea
+  // نمایش آن در textarea
   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
+  // نمایش آن در textarea
   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/mouseenter-mouseleave-delegation.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
index eedd38716..f6d1b069b 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/index.html
@@ -11,57 +11,57 @@
 
   <table id="table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3"><em>باگوآ</em> جدول: جهت, عنصر, رنگ, مفهوم</th>
     </tr>
     <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
+      <td class="nw"><strong>شمال غرب</strong>
+        <br>فلز
+        <br>نقره
+        <br>ریش سفیدان
       </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
+      <td class="n"><strong>شمال</strong>
+        <br>آب
+        <br>آبی
+        <br>تحول
       </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
+      <td class="ne"><strong>شمال شرق</strong>
+        <br>زمین
+        <br>زرد
+        <br>جهت
       </td>
     </tr>
     <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
+      <td class="w"><strong>غرب</strong>
+        <br>فلز
+        <br>طلا
+        <br>جوان
       </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
+      <td class="c"><strong>وسط</strong>
+        <br>همه‌چیز
+        <br>بنفش
+        <br>توازن
       </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
+      <td class="e"><strong>شرق</strong>
+        <br>چوب
+        <br>آبی
+        <br>آبی
       </td>
     </tr>
     <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
+      <td class="sw"><strong>جنوب غرب</strong>
+        <br>زمین
+        <br>قهوه‌ای
+        <br>آرامش
       </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
+      <td class="s"><strong>جنوب</strong>
+        <br>آتش
+        <br>نارنجی
+        <br>سربلندی
       </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
+      <td class="se"><strong>جنوب شرقی</strong>
+        <br>چوب
+        <br>سبز
+        <br>افسانه
       </td>
     </tr>
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
index 209d9e6b2..1030a071d 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html
@@ -11,57 +11,57 @@
 
   <table id="table">
     <tr>
-      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+      <th colspan="3"><em>باگوآ</em> جدول: جهت, عنصر, رنگ, مفهوم</th>
     </tr>
     <tr>
-      <td class="nw"><strong>Northwest</strong>
-        <br>Metal
-        <br>Silver
-        <br>Elders
+      <td class="nw"><strong>شمال غرب</strong>
+        <br>فلز
+        <br>نقره
+        <br>ریش سفیدان
       </td>
-      <td class="n"><strong>North</strong>
-        <br>Water
-        <br>Blue
-        <br>Change
+      <td class="n"><strong>شمال</strong>
+        <br>آب
+        <br>آبی
+        <br>تحول
       </td>
-      <td class="ne"><strong>Northeast</strong>
-        <br>Earth
-        <br>Yellow
-        <br>Direction
+      <td class="ne"><strong>شمال شرق</strong>
+        <br>زمین
+        <br>زرد
+        <br>جهت
       </td>
     </tr>
     <tr>
-      <td class="w"><strong>West</strong>
-        <br>Metal
-        <br>Gold
-        <br>Youth
+      <td class="w"><strong>غرب</strong>
+        <br>فلز
+        <br>طلا
+        <br>جوان
       </td>
-      <td class="c"><strong>Center</strong>
-        <br>All
-        <br>Purple
-        <br>Harmony
+      <td class="c"><strong>وسط</strong>
+        <br>همه‌چیز
+        <br>بنفش
+        <br>توازن
       </td>
-      <td class="e"><strong>East</strong>
-        <br>Wood
-        <br>Blue
-        <br>Future
+      <td class="e"><strong>شرق</strong>
+        <br>چوب
+        <br>آبی
+        <br>آبی
       </td>
     </tr>
     <tr>
-      <td class="sw"><strong>Southwest</strong>
-        <br>Earth
-        <br>Brown
-        <br>Tranquility
+      <td class="sw"><strong>جنوب غرب</strong>
+        <br>زمین
+        <br>قهوه‌ای
+        <br>آرامش
       </td>
-      <td class="s"><strong>South</strong>
-        <br>Fire
-        <br>Orange
-        <br>Fame
+      <td class="s"><strong>جنوب</strong>
+        <br>آتش
+        <br>نارنجی
+        <br>سربلندی
       </td>
-      <td class="se"><strong>Southeast</strong>
-        <br>Wood
-        <br>Green
-        <br>Romance
+      <td class="se"><strong>جنوب شرقی</strong>
+        <br>چوب
+        <br>سبز
+        <br>افسانه
       </td>
     </tr>
 
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
index f26fdbdae..6d7211ba2 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
@@ -8,8 +8,8 @@
 
 <body>
 
-  <div id="parent" onmouseenter="mouselog(event)" onmouseleave="mouselog(event)">parent
-    <div id="child">child</div>
+  <div id="parent" onmouseenter="mouselog(event)" onmouseleave="mouselog(event)">پدر
+    <div id="child">فرزند</div>
   </div>
 
   <textarea id="text"></textarea>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
index b110a199d..c770a71a7 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html
@@ -8,8 +8,8 @@
 
 <body>
 
-  <div id="parent" onmouseover="mouselog(event)" onmouseout="mouselog(event)">parent
-    <div id="child">child</div>
+  <div id="parent" onmouseover="mouselog(event)" onmouseout="mouselog(event)">پدر
+    <div id="child">فرزند</div>
   </div>
 
   <textarea id="text"></textarea>
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
index 9a2691a2f..7c29ae80c 100755
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
@@ -8,8 +8,8 @@
 
 <body>
 
-  <div id="parent">parent
-    <div id="child">child</div>
+  <div id="parent">پدر
+    <div id="child">فرزند</div>
   </div>
   <textarea id="text"></textarea>
   <input onclick="clearText()" value="Clear" type="button">
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..d3ec5ba89 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">رویدادها اینجا نشان داده‌ ‌می‌شوند!
 </textarea>
 
   <script src="script.js"></script>
