initial commit

1 files changed, 123 insertions, 0 deletions

diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html
new file mode 100644
index 0000000000..9cfdbc5ba0
--- /dev/null
+++ b/files/fr/web/api/element/mouseover_event/index.html
@@ -0,0 +1,123 @@
+---
+title: 'Element : évènement mouseover'
+slug: Web/API/Element/mouseover_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseover
+translation_of: Web/API/Element/mouseover_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// Ce gestionnaire ne sera exécuté qu'une fois
+// lorsque le curseur se déplace sur la liste
+test.addEventListener("mouseenter", function( event ) {
+  // on met l'accent sur la cible de mouseenter
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// Ce gestionnaire sera exécuté à chaque fois que le curseur
+// se déplacera sur un autre élément de la liste
+test.addEventListener("mouseover", function( event ) {
+  // on met l'accent sur la cible de mouseover
+  event.target.style.color = "orange";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseover_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>