Bonsoir !

J'aimerais qu'en faite, quant on survol un lien, donc a:hover, deux balise <hr> passe de width 70% à width 100%, et je pense que cela est simple mais je ne trouve pas :x

Merci !

Possible uniquement si les <hr> se trouvent dans la balise concernée par le hover (a). Sinon c'est impossible en CSS pur.

-
Edité par Genroa 9 août 2018 à 15:14:40

Bonjour, 

en résumé :

C'est faisable, selon le contexte, de plusieurs manières :
- A:hover B (si B est descendant de A)
- A:hover > B (si B est fils de A)
- A:hover + B (si B est frère directement suivant de A)
- A:hover ~ B (si B est un frère suivant de A)

source : https://forum.alsacreations.com/topic-4-62016-1-Action-dune-balise-sur-une-autre-balise.html

Salut,

et utilise plutôt des div que des <hr> qui ont un sens sémantique.

Hum en effet je ne suis pas un expert expert alors je vous partage mon code pour que vous voyez un petit peut l'histoire

https://jsfiddle.net/Lsjez7m2/8/

Je veux en effet que quant on passe sur 1 ( par exemple ) le hr du dessous passe en 100%

Ou encore si je passe sur le 2 le hr du dessus et du dessous passe en 100% et non pas en 70%

-
Edité par SocomLeGrand 9 août 2018 à 16:01:57

Je pense que ChrisLebure t'a donné la solution plus haut :

- A:hover + B (si B est frère directement suivant de A)

et tu peux faire sans hr avec une simple bordure.

-
Edité par Frogweb 9 août 2018 à 16:10:01

Je suis sur que cela est facile, je peux paraître bête mais je ne comprend pas ???

a:hover + hr {...}

Ok vu, ça marche mais que pour le 1, c'est a dire quant on passe sur le 2, je voudrais que la ligne du dessus et du dessous s'agrandisse hros, seulement celle du bas le fait.

SocomLeGrand a écrit:

Ok vu, ça marche mais que pour le 1, c'est a dire quant on passe sur le 2, je voudrais que la ligne du dessus et du dessous s'agrandisse hros, seulement celle du bas le fait.

Là c'est impossible pour la ligne du dessus. Tu ne peux pas remonter dans le dom en CSS (à part avec un clic).

Je vais me pencher sur ton idée, j'entrevois une solution avec des bordures. Mais je ne te promets rien.

-
Edité par Frogweb 9 août 2018 à 16:25:14

Tu sembles vouloir faire un affichage de type accordéon. C'est impossible en CSS pur sans JS à ma connaissance.

Même pas si on joue avec les class et que je met pour chaque ligne une class differente ?

Je vais faire des tests, j'ai une petite idée...

EDIT :

c'est tordu mais il me semble que ça fait ce que tu cherche :

    <div>
        <a href="#" class="normal">mon lien</a>
        <a href="#" class="border-top">mon lien</a>
        <a href="#" class="border-top">mon lien</a>
        <a href="#" class="border-top">mon lien</a>
    </div>

div {
    width:300px;
}
a {
    text-decoration: none;
    display:block;
    padding:20px 0;
    width:60%;
    margin:auto;
    text-align: center;
}
.border-top {
    border-top: 1px solid #333
}
a:hover, 
.border-top:hover + .border-top,
.normal:hover + .border-top {
    width:auto;
}

-
Edité par Frogweb 9 août 2018 à 16:34:29

"Même pas si on joue avec les class et que je met pour chaque ligne une class differente ?"

J'pense que si tu fais ça tu peux arrêter le CSS et ne plus jamais écrire de dev web, et que tu vas faire tomber en dépression plein de monde. x) plus sérieusement, les classes sont conçues pour être réutilisables. Tu ne sais pas forcément combien de lignes tu vas avoir dans un design modulaire, donc c'est pas une bonne idée d'écrire du sur mesure.

Pas sûr que ce soit ce qui était demandé, mais pas mal Frogweb

-
Edité par Genroa 9 août 2018 à 16:46:55

Frogweb a écrit:

Je vais faire des tests, j'ai une petite idée...

EDIT :

c'est tordu mais il me semble que ça fait ce que tu cherche :

    <div>
        <a href="#" class="normal">mon lien</a>
        <a href="#" class="border-top">mon lien</a>
        <a href="#" class="border-top">mon lien</a>
        <a href="#" class="border-top">mon lien</a>
    </div>

div {
    width:300px;
}
a {
    text-decoration: none;
    display:block;
    padding:20px 0;
    width:60%;
    margin:auto;
    text-align: center;
}
.border-top {
    border-top: 1px solid #333
}
a:hover, 
.border-top:hover + .border-top,
.normal:hover + .border-top {
    width:auto;
}

-
Edité par Frogweb il y a 24 minutes

Yep c'est ça, apres j'ai essayer de l'intégrer a mon code mais ça a fait un truc vraiment bizarre