CSS tiene varias pseudoclases que se pueden añadir a varios elementos, por ejemplo.
- :hover, que cambia las propiedades especificadas al pasar el mouse.
- :focus, que cambia las propiedades especificadas al estar seleccionadas (formularios).
- :active, que cambia las propiedades especificadas al estar recién tocadas.
Bien, esto es bastante eficiente, pero en IE tiene sus limitaciones, hover y active solo funcionan en los hipervínculos, y focus, bien, no funciona.
Bueno, ahora hay una pequeña solución, que te los arregla en un, dos por tres.
Primero, nos creamos un archivo llamado pseudoie.htc, y le copiamos el siguiente código:
Código :
<attach event="ondocumentready" handler="parseStylesheets" /> <script> /** * Whatever:hover - V2.02.060206 - hover, active & focus * ------------------------------------------------------------ * (c) 2005 - Peter Nederlof * Peterned - http://www.xs4all.nl/~peterned/ * License - http://creativecommons.org/licenses/LGPL/2.1/ * * Whatever:hover is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) any later version. * * Whatever:hover is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * Credits and thanks to: * Arnoud Berendsen, Martin Reurings, Robert Hanson * * howto: body { behavior:url("csshover.htc"); } * ------------------------------------------------------------ */ var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i, currentSheet, doc = window.document, hoverEvents = [], activators = { onhover:{on:'onmouseover', off:'onmouseout'}, onactive:{on:'onmousedown', off:'onmouseup'}, onunknown:{on:'onfocus', off:'onblur'} } 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|unknown))/i).exec(newSelect)[1]; var affected = select.replace(/:(hover|active|unknown).*$/, ''); 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('\\b' + classname[1] + '\\b'):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; } </script>
Al hacer sólo esto, todavía no funciona, tenemos que 'decirle' a nuestro CSS que utilice ese archivo como un comportamiento, haremos lo siguiente:
Código :
body { ... behavior: url("pseudoie.htc"); ... }
Bueno, espero que les haya sido de ayuda
Un saludo
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por MorphX el 21 de Abril de 2006
Vamos a probarlo ...
Por Alan el 21 de Abril de 2006
MorphX :
Vamos a probarlo ...
Yo ya lo probé y va de maravilla
Nota: Para ahorrar tiempo de carga en otros exploradores, es recomendable poner el código CSS dentro de una condicional de IE.
Saludos!
Por NEO_JP el 22 de Abril de 2006
He usado el Script-IE7 durante un tiempo y es estable, pero muy pesado, por lo visto esto es relativamente liviano (comparandolo con el script IE7), qué tal es la rapidez en la carga de IE?
Cuentame un poco sobre esto.
Por Alan el 22 de Abril de 2006
NEO_JP :
He usado el Script-IE7 durante un tiempo y es estable, pero muy pesado, por lo visto esto es relativamente liviano (comparandolo con el script IE7), qué tal es la rapidez en la carga de IE?
Cuentame un poco sobre esto.
¿Por qué no posteas el Script-IE7?...
Por ma el 06 de Junio de 2006
Estoy empezando a trabajar en una empresa recien salido salido del modulo y no estoy muy puesto, queria preguntaros si se podría hacer lo del efecto hover en IE sin el archivo .htc, ya que no me permiten usar este truquillo.
He mirado en muchos sitios sobre este tema y la solución es la misma, el uso del .htc, pero como yo no puedo usarlo no me sirve.
Muchas gracias por adelantado y un saludo para todos.
Por frenadoll el 04 de Abril de 2007
Código :
Suerte
Por PERVack el 10 de Mayo de 2007
Por webgeri el 21 de Agosto de 2008
¿Hay que hacer algo para que funcione en IE7?
Gracias
saludos alejandro
Por Orlin Alvarado el 03 de Junio de 2010
Si quieren un ejemplo pueden enviarme avisarme a mi correo: [email protected]