Problème de sélecteur ( :hover et compagnie)

Problème de sélecteur ( :hover et compagnie) - HTML/CSS - Programmation

Marsh Posté le 01-02-2006 à 01:55:11    

Salut à tous,  
 
je me met doucement à l'utilisation des CSS dans la "dynamique" d'une page, et je me retrouve confronté au pb suivant : je cherche à faire une menu. Un pictogramme différent est affiché à un emplacement fixe, selon la rubrique survolée.
 
code html :  


<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a id="current" href="/presentation.html">_P<span class="lettre_couleur">R</span>&Eacute;SENTATION</a></li>
    <li><a href="/competences.html">_C<span class="lettre_couleur">O</span>MP&Eacute;TENCES</a></li>
    <li><a href="/formation.html">_F<span class="lettre_couleur">O</span>RMATION</a></li>
    <li><a href="/experience.html">_E<span class="lettre_couleur">X</span>P&Eacute;RIENCE</a></li>
    <li><a href="/complements.html">_C<span class="lettre_couleur">O</span>MPL&Eacute;MENTS</a></li>
    <li id="picto">Mon picto (à venir)</li>
  </ul>
</div>


 
css :


#picto {
  background-color: #5FA941;
}
 
#navcontainer li a:hover #picto {
  background-color: #f00;  
}
 
#navcontainer li a#current:hover #picto {
  background-color: #0f0;  
}


 
ça ne fonctionne pas, bien sur, sinon je n'serais pas là ! ;-)
Donc, si quelqu'on voyait pourquoi ça ne marche pas, voire avait une soution, ce serait merveilleux !
 
EDIT : heu, le problème, ce serait pas que "#navcontainer li a:hover #picto"  désigne en fait :  
- balise ayant un identifiant "picto"
- CONTENUE dans une balise <a survolée
- CONTENUE ...
vu comme ça, ça ne peut pas marcher mon truc ! :(


Message édité par El_gringo le 01-02-2006 à 02:19:10

---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 01-02-2006 à 01:55:11   

Reply

Marsh Posté le 01-02-2006 à 02:25:09    

a ta place, je le ferai en javascript avec qq chose du genre  

Code :
  1. <li><a href="/complements.html" onMouseOver="document.getElementById('picto').style.background-color='#0F0'"> BLABLABLA</a></li>


---------------

Reply

Marsh Posté le 01-02-2006 à 09:01:46    

Mouais. J'y ai pensé. C'est moins clean, ça ne marchera pas si Javascript est désactivé, mais c'est tellement plus simple. Et quelque part, je trouve ça plus propre de rajouter un élément de liste, plutôt que mettre des span après chaque élément, comme ici.
 
Au passage : si je fais ça en javascript, il va falloir que je précharge mes pictogrammes (le chagement de couleur c'était du blug, en fait c'est un changement d'images que je fais), qqn peut me rappeler comment on fait ça ?


Message édité par El_gringo le 01-02-2006 à 09:08:36

---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 01-02-2006 à 09:08:54    

Quoi que, c'est peut être pas si mal de faire ça :  
http://www.meyerweb.com/eric/css/e [...] demo2.html


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 01-02-2006 à 10:15:12    

Mais le positionement en absolute, j'aime pas ça ! Dès qu'on veut bouger le moindre truc, 'faut tout changer ! :(


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed