onmouseout属性, onmouseover属性はどちらもポインティングデバイス（pointing device）の動作によりイベントが発生するイベント属性（イベントハンドラ）です。onmouseover属性は当該要素にカーソル（ポインタ）が合わさったときに、onmouseout属性は当該要素内に入っていたカーソルが外れたときに起動するスクリプトを指定します。
*onmouseout属性, onmouseover属性はポインティングデバイスがない環境では、まったく操作できなないので注意してください。
onmouseover属性, onmouseout属性を組み合わせて img要素にカーソルが合わさると、それまで表示されていた画像と切り替わり、img要素からカーソルが外れると元の画像に戻るといったロールオーバー（Rollover）と呼ばれる仕組みによく利用されています（サンプル参照）。その他にもフォームのコントロール部品にマウスが合わさると背景色を変えるなど一時的にその部分を目立たせたりするのにも役立ちます。
また、onmouseover属性, onmouseout属性のように当該要素の上でのカーソル（ポインタ）の動作によりイベントを発生させる属性に、onmousemove属性があります。これらの属性をひとつの同じ要素に併せて指定している場合、イベントは onmouseover→onmousemove→onmouseout の順に発生します。なお、onmouseover属性と onmousemove属性のイベントが発生する動作は異なり、onmouseover属性は当該要素内にカーソルが入ったときに一度だけ発生し、その後要素内で動かしているだけではイベントは起こらず、要素内にカーソルを出入りさせると再びイベントが発生します。これに対して、onmousemove属性は要素内でカーソルを少しでも動かすと、その度にイベントが発生します。
次のスクリプトでは、表の行（tr要素）にカーソル（ポインタ）が合わさるとセルの背景色を "deepskyblue" に塗り、tr要素内に含まれているセルからカーソルが外れると元の色にします。これは、Windows版Internet Explorer 6 が a要素をセレクタとする場合にしか対応していない CSS の :hover疑似クラスを JavaScript で代替実現するのに有用です。
<script type="text/javascript">
var normalColor = "transparent";
var hoverColor = "deepskyblue";
function mout(obj) { obj.style.backgroundColor=normalColor; }
function mover(obj) { obj.style.backgroundColor=hoverColor; }
</script>
......
<table summary="MIMEタイプの適性表">
<thead><tr>
<th>MIMEタイプ</th><th>HTML 4.01</th><th>XHTML 1.0</th>
<th>XHTML 1.0（非互換）</th><th>XHTML 1.1</th>
</tr></thead>
<tbody>
<tr onmouseover="mover(this)" onmouseout="mout(this)">
<th>text/html</th>
<td>推奨（Should）</td><td>可能（May）</td>
<td>非推奨（Should not）</td><td>非推奨（Should not）</td>
</tr><tr onmouseover="mover(this)" onmouseout="mout(this)">
<th>application/xhtml+xml</th>
<td>禁止（Must not）</td><td>推奨（Should）</td>
<td>推奨（Should）</td><td>推奨（Should）</td>
</tr><tr onmouseover="mover(this)" onmouseout="mout(this)">
<th>application/xml, text/xml</th>
<td>禁止（Must not）</td><td>可能（May）</td>
<td>可能（May）</td><td>可能（May）</td>
</tr></tbody>
</table>
次のスクリプトではアンカーにカーソルが合わさると textarea要素にリンク先の説明を表示します。
<script type="text/javascript">
function msg(num) {
switch(num) {
case 0: text="イベント属性（イベントハンドラ）とは、…。"; break;
case 1: text="onmouseover属性とは、…。"; break;
case 2: text="onmouseout属性とは、…。"; break;
}
document.getElementById('descript').value=text; }
</script>
......
<ul><li><a href="event"
onmouseover="msg(0)">イベント属性</a></li>
<li><a href="onmouseout"
onmouseover="msg(1)">onmouseover属性</a></li>
<li><a href="onmouseout"
onmouseover="msg(2)">onmouseout属性</a></li></ul>
<p><textarea id="descript" cols="50" rows="3"></textarea></p>
次のスクリプトは画像にカーソルが合わさると表示されていた画像と切り替わり、画像からカーソルが外れると元の画像に戻るロールオーバーです。
<img src="元になる画像の URI" alt="代替テキスト" onmouseover="this .src='変更する画像の URI'" onmouseout="this .src='元の画像の URI'">
http://w3g.jp/xhtml/dic/onmouseout実績：大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー