JavaScript を用いて、onmouseover と onmouseout の操作に対応して class 属性値を切り替える。
初期値は red で、文字色は赤。オンマウスで値が blue にセットされ、文字色が青になる。:hover 擬似要素と同等の効果が得られることを確認してほしい。
<ul class="main">
<li class="red" onmouseover="this.className='blue'" onmouseout="this.className='red'">ぬるぽ</li>
</ul>
ul.main li
{margin:1em; padding:10px; list-style:inside;}
li.red
{color:red; border:1px solid red;}
li.blue
{color:blue; border:1px solid blue;}
各 li 要素の支配領域を CSS の border で示す。
テキスト上でなくとも、領域上にカーソルが侵入すれば反応することに注目!