Garder couleur lien survolé et changer autres

Kiko -  
 Kiko -
Bonjour à tous,

Savez-vous s'il est possible en css/html de bidouiller quelque chose pour que quand on survole un lien dans un menu, ce sont les couleurs des autres liens qui changent, dans mon cas qui s'éclaircissent, et laissent alors le lien survolé comme le plus apparent.

Merci beaucoup à tous!

5 réponses

  1. babane5 Messages postés 108 Statut Membre 11
     
    En pensant que tu as trois lien (class) => .lien1 .lien2 .lien3

    .lien1:hover > .lien2, .lien3 {}

    Je n'ai pas test, donc je peux pas te dire si sa fonctionne vraiement !

    0
  2. Mihawk Messages postés 4753 Statut Contributeur 846
     
    Bonjour,

    Oui c'est bien évidemment possible, moyennant l'usage du Javascript.

    Tu peux, par exemple, créer 2 classes CSS : "lienActif" et "lienInactif". Ensuite quand tu passes sur un lien, tu appelles l'événement Javascript "onMouseOver" qui va comporter une boucle parcourant tous les liens de la page, afin de changer leur classe (via monLien.className) pour leur donner la classe "lienInactif". Le navigateur fera le reste.

    Note que, si toutes liens se trouve dans le même div parents, par exemple :

    <div>
       <a></a>
       <a></a>
       etc...
    </div>

    Je te conseille alors d'utiliser le DOM.

    <div>
       <a onMouseOver="montrer(this);" class="lienActif"></a>
       <a onMouseOver="montrer(this);" class="lienActif"></a>
       etc...
    </div>

    Puis

    <script type="text/javascript">
       function montrer(element){
          for(var i=0 ; i<element.parentNode.childNodes.length ; i++){
             if (element.parentNode.childNodes.get(i) != element){
                element.parentNode.childNodes.get(i).className = "lienInactif";
             }
          }
       }
    </script>

    C'est un premier jet ; Il faut aussi faire la méthode qui remet tous les liens dans l'état initial. De puis je ne suis pas sûr à 100% du element.parentNode.childNodes.get(i) ; c'est peut-être element.parentNode.childNodes[i] mais je n'ai pas le temps de vérifier.

    J'espère que cela te met sur la voie...
    0
  3. babane5 Messages postés 108 Statut Membre 11
     
    Ou tu le fais en jQuery

    <script type="text/javascript" src="js/jquery.js">

    <div>
    <a class="lien"></a>
    <a class="lien"></a>
    <a class="lien"></a>
    </div>

    <script type="text/javascript">
    $(document).ready(function(){

    $(".lien").mouseenter(function(){
    $("lien").css("color", "blue"); // Couleur que tu veux qu'elles prennes
    $(this).css("color", red"); // Couleur du liens qui ne dois pas changer
    });

    $(".lien").mouseleave(function(){
    $("lien").css("color", "red"); // Couleur retours à la normal
    $(this).css("color", red"); // Couleur retours à la normal
    });

    });

    </script>

    Bre
    0
  4. Kiko
     
    Merci pour les pistes! Je me mets au travail et je vous dis!
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Kiko
     
    Bon ben après plusieurs heures d'efforts, je crois que cette fois c'est un peu trop compliqué pour moi! Je dépose les armes! Pas de regrets, je reste avec mon css actuel... Merci en tout cas pour vos conseils qui serviront certainement à d'autres visiteurs du forum / Ciao!
    0
    1. Mihawk Messages postés 4753 Statut Contributeur 846
       
      Dommage avec un début de code on t'aidait à le finir !
      0
    2. Kiko
       
      Je sais, c'est sympa mais là c'est trop pro pour moi. J'ai essayé d'avancer ce que vous m'aviez déjà proposé mais sans vraiment de succès! A un certain moment la prog c'est un métier
      0