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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  li:hover sur IE

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

li:hover sur IE

n°983482
freed102
Arayashiki
Posté le 16-02-2005 à 13:32:15  profilanswer
 

Code :
  1. .colorlist
  2. {
  3. padding: 0px;
  4. margin:auto;
  5. }
  7. .colorlist li
  8. {
  9. padding: 0px;
  10. margin: 2px;
  11. width:10px;
  12. height:10px;
  13. border: 1px solid #CCCCCC;
  14. float:left;
  15. list-style: none outside;
  16. position : relative;
  17. }
  19. .colorlist li:hover
  20. {
  21. width:10px;
  22. height:10px;
  23. border: 1px solid #FF0000;
  24. list-style: none outside;
  25. position : relative;
  26. cursor:pointer;
  27. }


 
la partie .colorlist li:hover n'a pas l'air de fonctionner sur IE ? :(
en fait j'ai encore epuré ma fonction DOM en Javascript en éliminant le <a href="#"....onclick="... return false;"> sur l'image... j'ai laissé l'image quand même pour pas que mon carré de couleur ne soit plus un carré de 10x10 (sur IE) mais sur IE :
 
1° la fonction onclick ne fonctionne pas...
2° le .colorlist li:hover...
 
d'habitude c firefox et les autres qui sont succeptibles... maintenant c l'inverse ! :lol:
 
http://clonecopy.net/php/ezdocs/
 
 
PS :
 
revoici le Javascript :
 

Code :
  1. function AffichePalette(nom,div,champ)
  2. {
  3. var hex_array=["00","33","66","99","CC","FF"];
  4. var d="Choisissez votre couleur \n";
  5. var doc=document.getElementById(div);
  6. element0=document.createTextNode(d);
  7. doc.appendChild(element0);
  9. for(red in hex_array)
  10. {
  11. element1=document.createElement("div" );
  12. doc.appendChild(element1);
  13. element1.setAttribute("id", "coulrange"+ hex_array[red]);
  14. element1.className= "coulrange";
  16. element2=document.createElement("ul" );
  17. element1.appendChild(element2);
  18. element2.className = "colorlist";
  21. for(green in hex_array)
  22. {
  23.  for(blue in hex_array)
  24.  {
  25.  element3=document.createElement("li" );
  26.  element2.appendChild(element3);
  27.  element3.style.backgroundColor="#"+ hex_array[red] + hex_array[green] + hex_array[blue];
  28.  element4=document.createElement("img" );
  29.  element3.appendChild(element4);
  30.  element4.setAttribute("src", "dummy.gif" );
  31.  element4.setAttribute("alt",  hex_array[red] + hex_array[green] + hex_array[blue]);
  32.  element4.setAttribute("width", "10" );
  33.  element4.setAttribute("height", "10" );
  34.  element4.setAttribute("onclick", "ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');" );
  35.  }
  37. }
  39. }
  40. }


Message édité par freed102 le 16-02-2005 à 13:39:25
mood
Publicité
Posté le 16-02-2005 à 13:32:15  profilanswer
 

n°983485
FlorentG
Unité de Masse
Posté le 16-02-2005 à 13:36:39  profilanswer
 

RECHERCHE
 
GOOGLE
 
ALTAVISTA
 
ALSACREATION
 
 
MSDN
 
 
etc....
 
Tu aura pu voir que la pseudo-classe hover ne fonctionne que sur les <a> avec IE...

n°983488
freed102
Arayashiki
Posté le 16-02-2005 à 13:37:45  profilanswer
 

FlorentG a écrit :

RECHERCHE
 
GOOGLE
 
ALTAVISTA
 
ALSACREATION
 
 
MSDN
 
 
etc....
 
Tu aura pu voir que la pseudo-classe hover ne fonctionne que sur les <a> avec IE...


 
arf.... c dommage !:(

n°983506
freed102
Arayashiki
Posté le 16-02-2005 à 13:53:49  profilanswer
 

j'ai remis un a href et ça :
 
.colorlist li a:hover
{
width:12px;
height:12px;
border: 1px solid #FF0000;
list-style: none outside;
position : relative;
cursor: pointer;
}
 
ça marche sur les deux.. Mais ça affiche une barre verticale sur firefox.. c bizarre... enfin bref je vais me debrouiller avec ça
 
par contre pour le prob du onclick qui marche pas (sur IE ! car sur firefox ça marche nickel)... je sais pas pourquoi ! pourtant il ne provoque plus d'erreur JS ! mais l'action ne se fait pas


Message édité par freed102 le 16-02-2005 à 13:59:36
n°983520
rompi
Posté le 16-02-2005 à 14:07:14  profilanswer
 

salut freed102,
 
Ne fixe pas de taille pour ton A,
met plutôt un "display:block"
 
par défault la balise a est inline, c'est normal,
pour un menu un a est un block dans un block li...

n°983524
freed102
Arayashiki
Posté le 16-02-2005 à 14:10:31  profilanswer
 

salut rompi
 
merci pour ton conseil
 
j'ai mis donc ça :
 
.colorlist li a:hover
{
border: 1px solid #FF0000;
cursor: pointer;
}
 
mais j'ai toujours le même prob sur firefox

n°983586
rompi
Posté le 16-02-2005 à 15:05:18  profilanswer
 

J'ai pas tout compris a ton problème de barre vertical,
mais tu peux t'inspire de ce tutoriel :
http://www.alsacreations.com/articles/menu/
 
Autre conseil, allège tes CSS, c'est pas la peine de répéter  
dans un :hover ce que tu as mis dans la règle principale...
( désolé je connais plus le vocabulaire CSS)
 
pour ton onclick, je ne sais pas et j'ai pas le temps de regarder plus...

n°983693
freed102
Arayashiki
Posté le 16-02-2005 à 16:27:20  profilanswer
 

pour mon prob de onclick...
 
ce code là vous choque-ti-il ?

Code :
  1. [...]
  2. <li style="background-color: rgb(0, 0, 51);">
  3. <a onclick="ActionColor('000033','couleuradresse1','couladresse1','couleuradresse');" href="#">
  4. <img alt="000033" src="dummy.gif" height="10" width="10">
  5. </a>
  6. </li>
  7. <li style="background-color: rgb(0, 0, 102);">
  8. <a onclick="ActionColor('000066','couleuradresse1','couladresse1','couleuradresse');" href="#">
  9. <img alt="000066" src="dummy.gif" height="10" width="10">
  10. </a>
  11. </li>
  12. <li style="background-color: rgb(0, 0, 153);">
  13. <a onclick="ActionColor('000099','couleuradresse1','couladresse1','couleuradresse');" href="#">
  14. <img alt="000099" src="dummy.gif" height="10" width="10">
  15. </a>
  16. </li>
  17. [...]


 
... j'ai mis un alert('toto') au debut de ma fonction ActionColor()... mais rien n'apparait !:(


Message édité par freed102 le 16-02-2005 à 16:27:41
n°983706
freed102
Arayashiki
Posté le 16-02-2005 à 16:42:45  profilanswer
 

pour info :
 
[...]
element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "#" );
element4.setAttribute("onclick", "alert('toto')" );
 
ça marche pas non plus !  :heink:  :ouch:  :sarcastic:

n°983708
freed102
Arayashiki
Posté le 16-02-2005 à 16:45:13  profilanswer
 

element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "javascript:ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');return false;" );
 
... comme ça ça marche pas non plus....  :sleep:

mood
Publicité
Posté le 16-02-2005 à 16:45:13  profilanswer
 

n°983715
freed102
Arayashiki
Posté le 16-02-2005 à 16:50:22  profilanswer
 

element4=document.createElement("a" );
element3.appendChild(element4);
element4.setAttribute("href", "#" );
element4.setAttribute("onclick", "java script:return(ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');return false;)" );
 
j'ai vu ça sur Google... mais ça marche pas ! :lol:

n°983734
freed102
Arayashiki
Posté le 16-02-2005 à 16:58:07  profilanswer
 

je viens de lire un truc peut etre interessant :
 
http://lists.evolt.org/archive/Wee [...] 59771.html
 
 

Citation :

The DOM attribute handling really shouldn't be used for event handling. The DOM has another system for dealing with events. In your case, unless you're serving as XML, you should use the old DOM0 way of handling it:
 
    [object HTMLElement].onevent=functionreference;
 
In this specific case,  
    document.getElementById('thelink').onclick=foo;
 
In cases where you want to send it an argument,
    document.getElementById('thelink').onclick=function(e){
        e=e||window.event;
        /*code to run when the event triggers*/
    };


Message édité par freed102 le 16-02-2005 à 16:59:48
n°983791
freed102
Arayashiki
Posté le 16-02-2005 à 17:27:39  profilanswer
 

donc resultat... le code qui est le bon a l'air d'etre celui là :
 

Code :
  1. element4=document.createElement("a" );
  2. element3.appendChild(element4);
  3. element4.setAttribute("href", "#" );
  4. element4.setAttribute("id", hex_array[red] + hex_array[green] + hex_array[blue]);
  5. document.getElementById(hex_array[red] + hex_array[green] + hex_array[blue]).onclick=function(e){
  6. e=e || window.event;
  7. ActionColor('"+ hex_array[red] + hex_array[green] + hex_array[blue] +"','"+nom+"','"+div+"','"+champ+"');
  8. };


 
mais ça m'a chamboullé un truc encore avec les document.getElementById(input).value ... qui ne fonctionnent plus de nouveau ! (mais au moins j'arrive à executer la fonction ! c deja ça !)

n°983833
freed102
Arayashiki
Posté le 16-02-2005 à 18:09:09  profilanswer
 

:pt1cable: :lol:
 

n°984398
cerel
Posté le 17-02-2005 à 00:52:02  profilanswer
 

Je te conseille la lecture de cet article sur pompage.net :
http://www.pompage.net/pompe/separation/
 
Il traite de la separation entre la structure du document et son "comportement".

n°984686
freed102
Arayashiki
Posté le 17-02-2005 à 11:22:34  profilanswer
 

Cerel a écrit :

Je te conseille la lecture de cet article sur pompage.net :
http://www.pompage.net/pompe/separation/
 
Il traite de la separation entre la structure du document et son "comportement".


 
Merci !
si je comprends bien... l'ideal serait de tester chaque élément de ma page avec une boucle (par exemple) ? ça n'allourdit pas le truc ça?


Message édité par freed102 le 17-02-2005 à 11:22:43
n°984962
freed102
Arayashiki
Posté le 17-02-2005 à 15:00:38  profilanswer
 


pfew !je lutte là ! j'ai trois parametres à faire passer comme ça... je sais pas par ou commencer
 

Code :
  1. function extract_hex()
  2. {
  3. var a= document.getElementsByTagName('a);
  5. for (var i = 0; i < a.length; i++)
  6. {
  7.  var hex = a[i].getAttribute('id');
  8.   if (a != '')
  9.   {
  10.   a[i].onclick=function(){ ActionColor(hex,nom,div,input);return false}
  11.   }
  12. }
  13. }


 
... là comme ça je recupere bien la couleur (à priori)... Mais je recupere pas le div à masquer, ni le champ dans lequel je dois passer la valeur de la couleur... grrr !

n°985743
FlorentG
Unité de Masse
Posté le 18-02-2005 à 10:01:26  profilanswer
 

Oula, fait une recherche, on en a parlé y'a pas longtemps ;)


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

  li:hover sur IE

 

Sujets relatifs
Solution incompatibilité IE/CSS + "hover"Problème d'affichage sous IE avec :hover
a et a:hover sous IE ?Alink,Hover,...?
[CSS] definir :hover dans l'attribut style directement ?CSS : probleme de hover avec Internet Explorer
[CSS - Résolu] C'est quoi ce délire sur le :hover ?css : possible de faire un hover sur un fond ?
[CSS]un hover sur une cellule de tablo????[CSS] faire un hover dans une balise style... [ - Job's Done - ]
Plus de sujets relatifs à : li:hover sur IE

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.087 secondes

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