Se connecter / S'enregistrer
Votre question

CSS, hover

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
30 Janvier 2009 22:14:40

Bonsoir !

Voila j'ai un petit problème et je demande votre aide ! :) 

Je ne comprends pas pourquoi mon :hover ne marche pas ...
Google ne m'a pas trop aidé alors je m'adresse à vous.

Voici mon code :

CSS
  1. .boutons :hover {
  2. background-image:url('img.jpg');
  3. }


HTML
  1. <input type="submit" value="S'inscrire!" class="boutons">


Voila, merci de votre aide.


Ps: J'suis sous Firefox si ça peut aider ...

Autres pages sur : css hover

a c 232 L Programmation
1 Février 2009 23:29:26

Salut,

Et bien, je vais te faire une réponse toute simple, enlève l'espace entre .boutons et :hover, de telle manière que ça donne .boutons:hover {...}

Par contre, le :hover ne fonctionnera pas sur IE il me semble.
Il faudra préférer passer par du javascript (onmouseover et onmouseout)
m
0
l
4 Février 2009 11:25:37

OmaR -> Effectivement, sur IE6 ça ne passe pas. Pour qu'IE6 gère le :hover sur cet élément, ajouter entre les balises <head></head>

  1. <!--[if IE 6]>
  2. <style type="text/css">
  3. body { behavior:url("csshover2.htc"); }
  4. </style>
  5. <![endif]-->


Ce fichier csshover2.htc doit contenir :

  1. <attach event="ondocumentready" handler="parseStylesheets" />
  2. <script>
  3. /**
  4. * Whatever:hover - V2.02.060206 - hover, active & focus
  5. * ------------------------------------------------------------
  6. * (c) 2005 - Peter Nederlof
  7. * Peterned - <a href="http://www.xs4all.nl/~peterned/" rel="nofollow" target="_blank">http://www.xs4all.nl/~peterned/</a>
  8. * License - <a href="http://creativecommons.org/licenses/LGPL/2.1/" rel="nofollow" target="_blank">http://creativecommons.org/licenses/LGPL/2.1/</a>
  9. *
  10. * Whatever:hover is free software; you can redistribute it and/or
  11. * modify it under the terms of the GNU Lesser General Public
  12. * License as published by the Free Software Foundation; either
  13. * version 2.1 of the License, or (at your option) any later version.
  14. *
  15. * Whatever:hover is distributed in the hope that it will be useful,
  16. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  17. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  18. * Lesser General Public License for more details.
  19. *
  20. * Credits and thanks to:
  21. * Arnoud Berendsen, Martin Reurings, Robert Hanson
  22. *
  23. * howto: body { behavior:url("csshover.htc"); }
  24. * ------------------------------------------------------------
  25. */
  26.  
  27. var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
  28. currentSheet, doc = window.document, hoverEvents = [], activators = {
  29. onhover:{on:'onmouseover', off:'onmouseout'},
  30. onactive:{on:'onmousedown', off:'onmouseup'},
  31. onunknown:{on:'onfocus', off:'onblur'}
  32. }
  33.  
  34. function parseStylesheets() {
  35. if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
  36. window.attachEvent('onunload', unhookHoverEvents);
  37. var sheets = doc.styleSheets, l = sheets.length;
  38. for(var i=0; i<l; i++)
  39. parseStylesheet(sheets[i]);
  40. }
  41. function parseStylesheet(sheet) {
  42. if(sheet.imports) {
  43. try {
  44. var imports = sheet.imports, l = imports.length;
  45. for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
  46. } catch(securityException){}
  47. }
  48.  
  49. try {
  50. var rules = (currentSheet = sheet).rules, l = rules.length;
  51. for(var j=0; j<l; j++) parseCSSRule(rules[j]);
  52. } catch(securityException){}
  53. }
  54.  
  55. function parseCSSRule(rule) {
  56. var select = rule.selectorText, style = rule.style.cssText;
  57. if(!csshoverReg.test(select) || !style) return;
  58.  
  59. var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
  60. var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
  61. var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
  62. var affected = select.replace(/:(hover|active|unknown).*$/, '');
  63. var elements = getElementsBySelect(affected);
  64. if(elements.length == 0) return;
  65.  
  66. currentSheet.addRule(newSelect, style);
  67. for(var i=0; i<elements.length; i++)
  68. new HoverElement(elements[i], className, activators[pseudo]);
  69. }
  70.  
  71. function HoverElement(node, className, events) {
  72. if(!node.hovers) node.hovers = {};
  73. if(node.hovers[className]) return;
  74. node.hovers[className] = true;
  75. hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
  76. hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
  77. }
  78. function hookHoverEvent(node, type, handler) {
  79. node.attachEvent(type, handler);
  80. hoverEvents[hoverEvents.length] = {
  81. node:node, type:type, handler:handler
  82. };
  83. }
  84.  
  85. function unhookHoverEvents() {
  86. for(var e,i=0; i<hoverEvents.length; i++) {
  87. e = hoverEvents[i];
  88. e.node.detachEvent(e.type, e.handler);
  89. }
  90. }
  91.  
  92. function getElementsBySelect(rule) {
  93. var parts, nodes = [doc];
  94. parts = rule.split(' ');
  95. for(var i=0; i<parts.length; i++) {
  96. nodes = getSelectedNodes(parts[i], nodes);
  97. } return nodes;
  98. }
  99. function getSelectedNodes(select, elements) {
  100. var result, node, nodes = [];
  101. var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  102. if(identify) {
  103. var element = doc.getElementById(identify[1]);
  104. return element? [element]:nodes;
  105. }
  106.  
  107. var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  108. var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
  109. var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
  110. for(var i=0; i<elements.length; i++) {
  111. result = tagName? elements[i].all.tags(tagName):elements[i].all;
  112. for(var j=0; j<result.length; j++) {
  113. node = result[j];
  114. if(classReg && !classReg.test(node.className)) continue;
  115. nodes[nodes.length] = node;
  116. }
  117. }
  118.  
  119. return nodes;
  120. }
  121. </script>
m
0
l
a c 232 L Programmation
4 Février 2009 16:44:00

Si ton problème est résolu, je t'invite à cliquer sur l'icône en forme de coupe () sur la réponse qui correspond le mieux à ta question.
Cela permettra de rajouter un [Résolu] à ton titre de topic afin qu'il soit mieux identifiable.
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS