web前端|html教程
div:hover在ie6中不兼容问题怎么解决
web前端-html教程
像淘宝网中分类有服饰、数码、护肤等,当鼠标移上去,div边框显示橙色的效果怎么弄出来的,div:hover在ff、ie7、ie8中都能实现,唯独ie6不能兼容div:hover,该怎样解决这个问题使得效果和淘宝网的这个一样在ie6中也可以实现该效果
安卓 精品源码,ubuntu论坛集成网卡,tomcat初始化协议失败,爬虫卫星数据,PHP采集股票收盘价,seo表格制作lzw
回复讨论(解决方案)
php微信商城系统源码,ubuntu指令zip,tomcat8放到服务,爬虫 保存cookie,php遍历文件夹下图片,湖里区百度seo优化lzw
/* 这个是普通样式,定义给需要效果的元素 */.hovereffect {border:1px solid blue;}/* 这个是hover样式 */.hovereffect:hover,.lay-on {background: #eee;border:1px solid red;}
div的hoverp的hover
宁志网站管理系统源码破解,ubuntu怎么换软件,tomcat猫图标不正常,多线程爬虫和单线程爬虫难度,关于PHP专业知识问答,上地seo优化lzw
ie6是css1.0,不支持非a的hover伪类,若想实现hover效果需要写js
将下面代码 写入htc文件中
/*解决ie6.0 的hover兼容问题*/var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,currentSheet, doc = window.document, hoverEvents = [], activators = { onhover:{on:onmouseover, off:onmouseout}, onactive:{on:onmousedown, off:onmouseup}}function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; window.attachEvent(onunload, unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets[i]);} function parseStylesheet(sheet) { if(sheet.imports) { try {var imports = sheet.imports, l = imports.length;for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]); } catch(securityException){} } try { var rules = (currentSheet = sheet).rules, l = rules.length; for(var j=0; j<l; j++) parseCSSRule(rules[j]); } catch(securityException){} } function parseCSSRule(rule) { var select = rule.selectorText, style = rule.style.cssText; if(!csshoverReg.test(select) || !style) return; var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, on$1); var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, .$2 + pseudo); var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1]; var affected = select.replace(/:(hover|active).*$/, \); var elements = getElementsBySelect(affected); if(elements.length == 0) return; currentSheet.addRule(newSelect, style); for(var i=0; i<elements.length; i++) new HoverElement(elements[i], className, activators[pseudo]); }function HoverElement(node, className, events) { if(!node.hovers) node.hovers = {}; if(node.hovers[className]) return; node.hovers[className] = true; hookHoverEvent(node, events.on, function() { node.className += + className; }); hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp(\\s++className, g),\); });} function hookHoverEvent(node, type, handler) { node.attachEvent(type, handler); hoverEvents[hoverEvents.length] = { node:node, type:type, handler:handler }; } function unhookHoverEvents() { for(var e,i=0; i<hoverEvents.length; i++) { e = hoverEvents[i]; e.node.detachEvent(e.type, e.handler); } }function getElementsBySelect(rule) { var parts, nodes = [doc]; parts = rule.split( ); for(var i=0; i<parts.length; i++) { nodes = getSelectedNodes(parts[i], nodes); } return nodes;} function getSelectedNodes(select, elements) { var result, node, nodes = []; var identify = (/\#([a-z0-9_-]+)/i).exec(select); if(identify) { var element = doc.getElementById(identify[1]); return element? [element]:nodes; }var classname = (/\.([a-z0-9_-]+)/i).exec(select); var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, \); var classReg = classname? new RegExp(\\ + classname[1] + \\):false; for(var i=0; i<elements.length; i++) { result = tagName? elements[i].all.tags(tagName):elements[i].all; for(var j=0; j<result.length; j++) {node = result[j];if(classReg && !classReg.test(node.className)) continue;nodes[nodes.length] = node; } } return nodes; }
页面中添加引用
body { /* 首先不支持绝对路径,只支持相对路径。 其次,是相对于当前ASPX网页的相对路径,和CSS文件的位置无关。 */ behavior: url(../css/hover.htc); /*可在IE6,7中对非元素使用hover等伪类*/ }
可以用table模拟
也可以用jquery写:
$document.ready(function(){ $(.test).mouseover(function(){ $(.test).css({boder:orange 1px solid}); }); $(.test).mouseout(function(){ $(.test).css({boder:blue 1px solid}); });});
自己测试了下,上楼的写法好像有点问题啊
$(document).ready(function(){
$(‘.test’).mouseover(function(){
$(‘.test’).css({“boder”:”orange 1px solid”});
});
$(‘.test’).mouseout(function(){
$(‘.test’).css({“boder”:”blue 1px solid”});
});
});
2楼可以!谢谢。
感谢2楼的同学,我困惑了很久的问题得到解决
再次谢谢你,谢谢网络。
2楼 hover.js 里面怎么写的??
没必要搞得这么复杂,
div:hover{zoom:1;XXX你的样式}
div:hover .xxxclass{XXX你的样式}
对了 ie6 相对css是1.0,只对a标签有hover有用,非a标签没用,但是css2.0中,基本所有的都可以。
我也遇到这个问题了啊~~不过重新引入一个文件来解决好麻烦啊~~希望有更简单的办法
用是会用了,就是写着就傻眼了