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	wakaba	1.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>