マウスが文字の範囲に入ると背景色が変わります。
上の例は要素のclassNameを使ってスタイルを変更します。 <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>sample</title> <style> .highlight { background-color: orange; } .normal { background-color: white; } </style> <script> window.onload = function() { var elm = document.getElementById('contents'); elm.onmouseover = function(){ elm.className = 'highlight'; }; elm.onmouseout = function(){ elm.className = 'normal'; }; }; </script> </head> <body> <div id="contents"> マウスが文字の範囲に入ると背景色が変わります。 </div> </body> </html>
他のスタイルも同様に適用できます。
|