mouseenter と mouseleave は対象にマウスカーソルが入った時と出た時に発生するイベントです。
サンプル
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> #sample { background-color: #ccc; width: 100px; height: 100px; padding: 1em; border-radius: 30px; border: 1px solid black; } </style> <script> window.addEventListener("load", function() { var sample = document.getElementById('sample'); sample.addEventListener("mouseenter", function() { this.style.backgroundColor = '#00f'; }, false); sample.addEventListener("mouseleave", function() { this.style.backgroundColor = '#ccc'; }, false); }, false); </script> <title> mouseenter と mouseleave のテスト</title> </head> <body> マウスが入った時(mouseenter)出た時(mouseleave)のテスト。 <div id="sample"></div> </body> </html>
こちらで試せます。
関連情報
Firefox 10 for developers - MDN
https://developer.mozilla.org/ja/Firefox_10_for_developers
