How to use an HTC file to encapsulate CSS styles

The following describes how to create an HTC instance by creating an HTC instance with the mouse sliding over and highlighted.

1. Create the HTC file architecture.

A standard HTC file contains a script block and a pair of optional component tags.
<Public: component>
<SCRIPT>
</SCRIPT>
</Public: component>

2. Write an executable script.
In the followingCodeAttach is used to set the message that the HTC receiving element is triggered in the onmouseover and onmouseout events. It notifies HTC to highlight the mouse over the element by switching the color.

<Public: component> <public: attach event = "onmouseover" onevent = "hilite ()"/> <public: attach event = "onmouseout" onevent = "Restore () "/> <script language =" jscript "> var normalcolor, normalspacing; function hilite () {// save original values normalcolor = runtimestyle. color; normalspacing = runtimestyle. letterspacing; runtimestyle. color = "red"; runtimestyle. letterspacing = 2;} function restore () {// Restore original values runtimestyle. color = normalcolor; runtimestyle. letterspacing = normalspacing ;}</SCRIPT> </public: component>
 

Save the above as the hilite. HTC file.

Note: You can directly access the attributes, methods, or event names without adding the element prefix.

In the previous example, we noticed that we directly called runtimestyle when switching colors, instead of using element. runtimestyle.

3. Once executed, HTC will be able to apply it on the webpage to achieve the effect of swiping and brightening the mouse.

    
 mouse over the two list items below to see this effect. 
  
  
 
   
   
 Xiao He's Boer 
 
   
   
 netsos.cnblogs.com