Bonjour,

J'aimerais savoir si c'est possible, quand on a 2 liens avec le même href dans notre page, d'appliquer, au survol d'un seul des 2, un style aux 2 en même temps ?

J'ai essayé:

a[href="page.html"]
{
    opacity: 0.7;
}

a[href="page.html"]:hover 
{
    opacity: 1;
}

On a bien les 2 liens avec une opacité de 0.7 au départ.

Cependant, quand je survole un des 2 liens, lui seul passe alors une opacité de 1 alors que je voudrais que cela se fasse pour les 2.

-
Edité par Itachi-Uchiha 8 septembre 2017 à 9:57:36

Bonjour,

en CSS ce n'est pas possible : le hover/focus ne s'applique à l'unique élément survolé/mis en focus. Tu peux jouer avec JavaScript, en détectant le hover/focus, et si l'url correspond à ce que tu attends, ajouter une classe spécifique à tous les liens avec cette url en href - et enlever la classe à la perte de hover/focus.

Bonjour,

Merci de ta réponse, les étapes que tu m'a indiqué me paraissent claires.

Du coup, j'avais pas encore commencé le javascript mais je m'y suis mis.

J'ai d'abord ajouter aux lien les attributs onmouseover (curseur sur l'élément) et onmouseout (curseur qui sort de l'élément) (qui sauf erreur de ma part sont les équivalents de hover en javascript):

<a href="preparer.html" mouseover="zoom(this.href)" mouseout="dezoom(this.href)">

J'ai  ajouté à ces attributs comme valeur (qui doit être un code JavaScript) les fonctions qui vont respectivement ajouter et enlever une classe spécifique aux liens qui ont le même href. Voilà les fonctions(que j'ai ajouté directement dans mon code html via la balise <script>):

<script>
            zoom(url)
            {    
                var els = document.querySelectorAll("a[href=url]"); //stocke tous les liens vers url (2 normalement) dans un tableur (de taille 1 donc)
                for (var i = 0; i < els.length; i++) 
                {
                      var el = els[i];
                      el.classlist.add("survol") //On ajoute la classe survol à ces liens
                }
            }

            dezoom(url)
            {
                var els = document.querySelectorAll("a[href=url]"); //stocke tous les liens vers url (2 normalement) dans un tableur (de taille 1 donc)
                for (var i = 0; i < els.length; i++) 
                {
                      var el = els[i];
                      el.classlist.remove("survol") //On enlève la classe survol à ces liens
                }
            }
</script>

Cependant, au survol, il ne se passe rien. J'ai un doute sur la ligne suivante:

var els = document.querySelectorAll("a[href=url]"); //stocke tous les liens vre url (2 normalement) dans un tableur (de taille 1 donc)

Je ne pense pas que le href comprenne que url est une variable javascript (parmètre de la fonction).

Alors, déjà, on oublie les "ontruc", c'est intrusif, on fait ça avec des écouteurs :

var listenedLinks = document.querySelectorAll('a.listened'); // ou juste "a" si tu n'as pas accès au HTML

for (var i = 0; i < listenedLinks.length; i++) {
  var link = listenedLinks[i]; 
  link.addEventListener('mouseenter', function() {
    zoom(link.href);
  });
  link.addEventListener('mouseleave', function() {
    zoom(link.href);
  });
}

Ensuite, dans tes fonction "zoom" et "dezoom", url est un argument, c'est donc une variable disponible dans la fonction. Il ne faut donc pas la laisser entre les guillemets - ça devient une chaîne de caractère toute banale.

Ce que tu cherches c'est

var els = document.querySelectorAll("a[href='" + url + "']");

Avec ce que tu me dis, j'obtiens comme code:

<script>

            var listenedLinks = document.querySelectorAll('a'); // ou juste "a" si tu n'as pas accès au HTML
            //On stocke tous les liens dans listenedLinks

            //Pour chaque lien
            for (var i = 0; i < listenedLinks.length; i++) 
            {
              listenedLinks[i].addEventListener('mouseover', function() //on lui permet d'être zoomé à chaque fois qu'on passe dessus
              {
                zoom(link.href);
              });
              listenedLinks[i].addEventListener('mouseout', function() //on lui permet d'être dézoomé à chaque fois qu'on le lâche
              {
                dezoom(link.href);
              });
            }

            zoom(url)
            {    
                var urlLinks = document.querySelectorAll("a[href='" + url + "']"); //stocke tous les liens vers url (2 normalement) dans un tableau (de taille 1 donc)
                for (var i = 0; i < urlLinks.length; i++) 
                {
                      urlLinks[i].classlist.add("survol") //On ajoute la classe survol à ces liens
                }
            }

            dezoom(url)
            {
                var urlLinks = document.querySelectorAll("a[href='" + url + "']"); //stocke tous les liens vers url (2 normalement) dans un tableau (de taille 1 donc)
                for (var i = 0; i < urlLinks.length; i++) 
                {
                      urlLinks[i].classlist.remove("survol") //On enlève la classe survol à ces liens
                }
            }
</script>

J'ai placé ce script avant de refermer la balise <body> (avant </body>).

J'ai bien les instructions que je voulais mais rien ne se passe lorsque je survol mes liens, que ce soit sur mozilla ou IE.

Ah mais dis donc ça m'a échappé mais on écrit

function zoom(url) {

pour déclarer une fonction, pas juste le nom. (bon ensuite si tu es dans un namespace c'est différent, mais faisons simple pour l'instant)

Et pense à mettre des console.log() un peu partout pendant le développement, pour tracer où tu passes et les valeurs des variables.

-
Edité par Lamecarlate 8 septembre 2017 à 14:43:27