Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2890 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Solution incompatibilité IE/CSS + "hover"

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Solution incompatibilité IE/CSS + "hover"

n°978697
strikenet
Posté le 11-02-2005 à 14:31:41  profilanswer
 

Salut,
 
Je partage ce que j'ai trouvé pour résoudre l'incompatibilité de IE6 à gérer le "hover" dans les CSS.
 
Ca marche impec ! A quelque chose prés ça donne la même chose que sous Firefox. :)
 

Code :
  1. nom du fichier : csshover.htc
  2. <attach event="ondocumentready" handler="parseStylesheets" />
  3. <script language="JScript">
  4. /**
  5. * PSUEDOS - V1.21.041022 - hover & active
  6. * ---------------------------------------------
  7. * Peterned - http://www.xs4all.nl/~peterned/
  8. * (c) 2004 - Peter Nederlof
  9. *
  10. * Credits  - Arnoud Berendsen  
  11. *          - Martin Reurings
  12. * for inspiring me and finding really sick bugs
  13. *
  14. * howto: body { behavior:url("csshover.htc" ); }
  15. * ---------------------------------------------
  16. */
  17. var currentSheet, doc = window.document;
  18. var activators = {
  19. onhover:{on:'onmouseover', off:'onmouseout'},
  20. onactive:{on:'onmousedown', off:'onmouseup'}
  21. }
  22. function parseStylesheets() {
  23. var sheets = doc.styleSheets, l = sheets.length;
  24. for(var i=0; i<l; i++)
  25.  parseStylesheet(sheets[i]);
  26. }
  27. function parseStylesheet(sheet) {
  28.  var l, rules, imports;
  29.  if(sheet.imports) {
  30.   imports = sheet.imports, l = imports.length;
  31.   for(var i=0; i<l; i++)
  32.    parseStylesheet(sheet.imports[i]);
  33.  }
  34.  rules = (currentSheet = sheet).rules, l = rules.length;
  35.  for(var j=0; j<l; j++) parseCSSRule(rules[j]);
  36. }
  37. function parseCSSRule(rule) {
  38.  var select = rule.selectorText, style = rule.style.cssText;
  39.  if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
  40.  var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
  41.  var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
  42.  var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
  43.  var affected = select.replace(/:hover.*$/, '');
  44.  var elements = getElementsBySelect(affected);
  45.  currentSheet.addRule(newSelect, style);
  46.  for(var i=0; i<elements.length; i++)
  47.   new HoverElement(elements[i], className, activators[pseudo]);
  48. }
  49. function HoverElement(node, className, events) {
  50. if(!node.hovers) node.hovers = {};
  51. if(node.hovers[className]) return;
  52. node.hovers[className] = true;
  53. node.attachEvent(events.on,
  54.  function() { node.className += ' ' + className; });
  55. node.attachEvent(events.off,
  56.  function() { node.className =
  57.   node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
  58. }
  59. function getElementsBySelect(rule) {
  60. var parts, nodes = [doc];
  61. parts = rule.split(' ');
  62. for(var i=0; i<parts.length; i++) {
  63.  nodes = getSelectedNodes(parts[i], nodes);
  64. } return nodes;
  65. }
  66. function getSelectedNodes(select, elements) {
  67.  var result, node, nodes = [];
  68.  var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  69.  var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  70.  var tagName = (/^[a-z0-9]+/i).exec(select.toUpperCase()) || '*';
  71.  for(var i=0; i<elements.length; i++) {
  72.   result = elements[i].getElementsByTagName(tagName);
  73.   for(var j=0; j<result.length; j++) {
  74.    node = result[j];
  75.    if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
  76.     classname[1] + '\\b').exec(node.className)))) continue;
  77.    nodes[nodes.length] = node;
  78.   }
  79.  } return nodes;
  80. }
  81. </script>


 
@+

mood
Publicité
Posté le 11-02-2005 à 14:31:41  profilanswer
 

n°978701
FlorentG
Unité de Masse
Posté le 11-02-2005 à 14:33:27  profilanswer
 

Mouaip, un comportement HTC... A utiliser alors dans un commentaire conditionnel. Aussi, y'a des chances d'avoir la prochaine version d'IE aux normes, donc valable pour IE5&6 :)

n°978703
harrysauce
Miaaaooou!
Posté le 11-02-2005 à 14:33:52  profilanswer
 

C'est quoi le problème d'IE avec le hover?
Je me sers du hover pour les liens et ca marche niquel, dans d'autres cas ça déconne?

n°978705
FlorentG
Unité de Masse
Posté le 11-02-2005 à 14:34:42  profilanswer
 

harrysauce a écrit :

C'est quoi le problème d'IE avec le hover?
Je me sers du hover pour les liens et ca marche niquel, dans d'autres cas ça déconne?


Ouais, IE ne gère la pseudo-classe hover que pour les liens. Si t'essayes de mettre sur un autre élément, ça ne fonctionne pas :cry:

n°978855
omega2
Posté le 11-02-2005 à 15:39:45  profilanswer
 

FlorentG a écrit :

Mouaip, un comportement HTC... A utiliser alors dans un commentaire conditionnel. Aussi, y'a des chances d'avoir la prochaine version d'IE aux normes, donc valable pour IE5&6 :)

Et quand est il pour toutes les versions de windows qui n'auront bientôt plus droit aux mises à jour d'IE? ;)
Et qui sait, la prochaine version grosse version d'IE sera peut être IE 7 ... à tout les coups valable uniquement sous XP et supérieur. ;)

n°978857
FlorentG
Unité de Masse
Posté le 11-02-2005 à 15:40:23  profilanswer
 

Ca sera pour 2006-2007 :(

n°1187540
El_gringo
Posté le 30-08-2005 à 09:30:12  profilanswer
 

heu, question bête : on en fait quoi d'un fichier htc ?

n°1187554
masklinn
í dag viðrar vel til loftárása
Posté le 30-08-2005 à 09:46:56  profilanswer
 

Manque :target :o
 
Puis :focus et :not (mais plus difficiles à émuler :o :o :o)

omega2 a écrit :

Et qui sait, la prochaine version grosse version d'IE sera peut être IE 7 ... à tout les coups valable uniquement sous XP et supérieur. ;)


IE7b1 n'est disponible que pour Windows XP SP2 et supérieurs (Windows Server 2003 & Vista), le produit final aura les mêmes compatibilités [:klem3i1]


Message édité par masklinn le 30-08-2005 à 09:48:05

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1187603
El_gringo
Posté le 30-08-2005 à 10:38:36  profilanswer
 

Au risque de me répèter :
On en fait quoi d'un fichier htc ?


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Solution incompatibilité IE/CSS + "hover"

 

Sujets relatifs
[java/CSS] incompatibilité IE !?[CSS/xHTML] Je ne comprend pas l'affichage de mon <div>...
[XHTML/CSS] Bien débuter, et coder un design proprement[CSS][Nioub] affichage de morceaux d'images
[HTML/CSS/PHP] problème de jonglage entre les css !CSS & largeur de div
Probleme avec CSS et Layout ou webdesignune image qui se colle pas (CSS)
Structure CSS 
Plus de sujets relatifs à : Solution incompatibilité IE/CSS + "hover"


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR