The code is as follows |
Copy Code |
<script type= "Text/javascript" > function over () { var para = document.getElementById ("Testpara"). ClassName = "Testover"; } function out () { var para = document.getElementById ("Testpara"). ClassName = "Testnormal"; } </script> |
HTML code
This example takes only one paragraph and sets the default class attribute "Testnormal" to it, and the mouse across and out will trigger the two JavaScript functions above, changing the class attribute of the paragraph itself.
The code is as follows |
Copy Code |
<p id= "Testpara" class= "Testnormal" onmouseover= "Over ()" onmouseout= "Out ()" > I am a sample paragraph, the mouse over me, you can change my class attributes, and thus change the application of CSS rules. </p>
|
Css
The CSS code sets two test styles.
code is as follows |
copy code |
. testnormal { border:1px solid black; } . testover { background: #999999; border:1px solid black; font-weight:bold; padding:3em; } |