trident/expression/pseudo-hover.html

<html xmlns="http://www.w3.org/1999/xhtml"
    lang="en" xml:lang="en">
<head>
<title>Pseudo Pseudo Class “hover” for WinIE</title>
<style type="text/css">
li {
  behavior: expression(function (el) {
    el.onmouseover = function () { this.className += ' hover' };
    el.onmouseout = function () { this.className = this.className.replace (/\\s*hover\\b/g, '') };
    runtimeStyle.bahavior = 'none';
  } (this));
}
li.hover {
  color: red;
  background-color: white;
}
</style>
</head>
<body>
<h1>Pseudo Pseudo Class “hover”</h1>

<div class="section" id="EXAMPLE">
<h2>Test</h2>

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
</div>

<div class="section" id="STYLE">
<h2>Style Sheet Fragment</h2>

<pre><code class="CSS">
li {
  behavior: expression(function (el) {
    el.onmouseover = function () { this.className += ' <em>HOVER</em>' };
    el.onmouseout = function () { this.className = this.className.replace (/\\s*<em>HOVER</em>\\b/g, '') };
    runtimeStyle.bahavior = 'none';
  } (this));
}
li:hover <code class="comment">/* For CSS compliant user agents */</code>,
li.<em>HOVER</em> <code class="comment">/* For WinIE */</code> {
  color: red;
  background-color: white;
}</code></pre>

</div>

</body>
</html>
1	<html xmlns="http://www.w3.org/1999/xhtml"
2	lang="en" xml:lang="en">
3	<head>
4	<title>Pseudo Pseudo Class “hover” for WinIE</title>
5	<style type="text/css">
6	li {
7	behavior: expression(function (el) {
8	el.onmouseover = function () { this.className += ' hover' };
9	el.onmouseout = function () { this.className = this.className.replace (/\\s*hover\\b/g, '') };
10	runtimeStyle.bahavior = 'none';
11	} (this));
12	}
13	li.hover {
14	color: red;
15	background-color: white;
16	}
17	</style>
18	</head>
19	<body>
20	<h1>Pseudo Pseudo Class “hover”</h1>
21
22	<div class="section" id="EXAMPLE">
23	<h2>Test</h2>
24
25	<ul>
26	<li>List item 1</li>
27	<li>List item 2</li>
28	<li>List item 3</li>
29	<li>List item 4</li>
30	</ul>
31	</div>
32
33	<div class="section" id="STYLE">
34	<h2>Style Sheet Fragment</h2>
35
36	<pre><code class="CSS">
37	li {
38	behavior: expression(function (el) {
39	el.onmouseover = function () { this.className += ' <em>HOVER</em>' };
40	el.onmouseout = function () { this.className = this.className.replace (/\\s*<em>HOVER</em>\\b/g, '') };
41	runtimeStyle.bahavior = 'none';
42	} (this));
43	}
44	li:hover <code class="comment">/* For CSS compliant user agents */</code>,
45	li.<em>HOVER</em> <code class="comment">/* For WinIE */</code> {
46	color: red;
47	background-color: white;
48	}</code></pre>
49
50	</div>
51
52	</body>
53	</html>