»`mouseover`« in JavaScript unter Firefox 49

Mit JavaScript kann auch auf auf die Bewegung des Zeigers auf ein Element reagiert werden.

Das Element, dessen addEventListener-Methode aufgerufen wurde, bezeichnen wird hier als das Zielelement.

Das Ereignis »mouseover« tritt ein, wenn der Zeiger auf die Fläche eines Elements bewegt wird, wenn dieses Element das Zielelement oder ein darin enthaltenes Unterelement ist.

Das Ereignis »mouseenter« tritt ein, wenn der Zeiger auf die Fläche des Zielelement bewegt wird.

Das Ereignis »mouseout« tritt ein, wenn der Zeiger aus die Fläche eines Elements heraus bewegt wird, wenn dieses Element das Zielelement oder ein darin enthaltenes Unterelement ist.

Das Ereignis »mouseleave« tritt ein, wenn der Zeiger aus der Fläche des Zielelement heraus bewegt wird.

Zum besseren Verständnis kann man das folgende Programm starten und die Maus über der Liste bewegen und dann wieder aus der Liste herausbewegen. (Dazu die Maus senkrecht bewegen – nicht waagerecht.)

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
ul { background-color: #888; }
ul>li:nth-child(1) { background-color: #F88; }
ul>li:nth-child(2) { background-color: #8F8; }
ul>li:nth-child(3) { background-color: #88F; }
</style></head><body>
<table>
  <tr>
    <th align="left">Name</th>
    <th align="left">Z&auml;hlerstand</th>
    </tr>
  <tr>
    <td valign="top" align="left">mouseenter</th>
    <td valign="top" align="right"><span id="mouseenter">0</span></th>
    </tr>
  <tr>
    <td valign="top" align="left">mouseleave</td>
    <td valign="top" align="right"><span id="mouseleave">0</span></td>
    </tr>
  <tr>
    <td valign="top" align="left">mouseover</td>
    <td valign="top" align="right"><span id="mouseover">0</span></td>
    </tr>
  <tr>
    <td valign="top" align="left">mouseout</td>
    <td valign="top" align="right"><span id="mouseout">0</span></td>
    </tr>
  </table>
<ul id="list">
  <li>[Anton]</li>
  <li>[Berta]</li>
  <li>[Cäsar]</li>
</ul>
<pre><code><script>/*<![CDATA[*/
list = window.document.getElementById( "list" );
mouseenter = window.document.getElementById( "mouseenter" );
onMouseenter = () => mouseenter.innerHTML = +mouseenter.innerHTML + 1;
list.addEventListener( "mouseenter", onMouseenter );
mouseleave = window.document.getElementById( "mouseleave" );
onMouseleave = () => mouseleave.innerHTML = +mouseleave.innerHTML + 1;
list.addEventListener( "mouseleave", onMouseleave );
mouseover = window.document.getElementById( "mouseover" );
onMouseover = () => mouseover.innerHTML = +mouseover.innerHTML + 1;
list.addEventListener( "mouseover", onMouseover );
mouseout = window.document.getElementById( "mouseout" );
onMouseout = () => mouseout.innerHTML = +mouseout.innerHTML + 1;
list.addEventListener( "mouseout", onMouseout );
/*]]>*/</script></code></pre></body></html>

CSS

Falls nur optische Effekte gewünscht sind, sollte mit der CSS -Pseudoklasse »:hover« gerbeitet werden.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
li:hover { font-weight: bold }
</style></head><body>
<ul id="list">
  <li>[Anton]</li>
  <li>[Berta]</li>
  <li>[Cäsar]</li>
</ul>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Aussprachehinweis

hover ˈhʌvɚ, ˈhɑvɚ

Bilder und CSS *

background:url("example.png");

content: url("example.png");

width: 90px;

»mouseover« in JavaScript unter Firefox 49

CSS

Bilder und CSS *

»`mouseover`« in JavaScript unter Firefox 49