用css实现onmouseover、onmouseout效果 [转]
hover 行为正是楼主想要提到的 onmouseover, onmouseout 效果。 在 IE 中对这个样式的支持不完全。默认只支持 <a> 标签的。 而实际上 WEB 标准里面， 应该对所有元素都支持。
如果你使用 Mozilla 或者 Opera, 那么可以看到不需要这个 htc 都可以正常运行的。 因为 htc 是 IE 特有的，别的浏览器不能理解，会忽略掉，不影响结果的显示。
以上这段 htc 是一个老外写的针对 IE 的 hover 行为的一个修正。
有了这个代码就方便多了， 而且最可贵的是， 以上的这个页面例子是可以兼容 IE, Mozilla 和 Opera 的。
##########################################
demo.htm
---------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Roger Chen">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
body {behavior: url(csshover.htc);}
table#tbl tr:hover {background: lightblue; color: blue;}
div.test:hover {background: orange; color: green;}
input.test2:hover {background: lightsteelblue; border: 1px dotted black;}
</style>
<div class="test">haha</div>
<p>表格1：</p>
<table id="tbl" border="1" width="100%">
<tr>
<td>OK</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>haha</td>
<td>fsdfsdf</td>
<td>测试</td>
</tr>
<tr>
<td>木野狐</td>
<td>html/css</td>
<td>javascript</td>
</tr>
</table>
<p>表格2：</p>
<table id="tbl2" border="1" width="100%">
<tr>
<td>OK</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>haha</td>
<td>fsdfsdf</td>
<td>测试</td>
</tr>
<tr>
<td>木野狐</td>
<td>html/css</td>
<td>javascript</td>
</tr>
</table>
<input class="test2">
#########################################
csshover.htc
------------------------------------
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var CSSBuffer, doc = window.document;
function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');
buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];
for(var i=0; i<sheets.length -1; i++) {
sheet = sheets;
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);
var affected = select.replace(/\:hover.*/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements.nodeName == 'A') continue;
new HoverElement(elements);
}
}
/**
* HoverElement
* -------------------------
* applies the hover
*/
function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });
element.attachEvent('onmouseout',
function() { element.className = element.className.replace(/onHover/g, ''); });
}
/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/
function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets, nodeList);
} return nodeList;
}
var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs.getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},
filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|)').exec(nodes[atr]))
filtered[filtered.length] = nodes;
} return filtered;
}
}
