4
votes

Comment puis-je déclencher plusieurs actions de survol sur les liens lorsque je survole un div?

J'essaie de déclencher plusieurs effets de survol en survolant ma div principale. Je ne peux pas comprendre comment faire animer la ligne sur les trois liens en même temps, et si cela peut être fait uniquement en CSS ou si je dois utiliser javascript, et je ne trouve pas la bonne solution aux messages précédents. Voici le code:

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

.right-project-headline h2 a {
    text-decoration: none;
    color: black;
    position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}
.right-project-headline h2 a::before {
  left: 0;
}
.right-project-headline h2 a::after {
  right: 0;
  transition: width 500ms ease;
}
.right-project-headline h2 a:hover::before {
  width: 100%;
  transition: width 500ms ease;
}
.right-project-headline h2 a:hover::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

html css hover

0 commentaires

3 Réponses :

1
votes

Vous devez ajouter : hover à votre div en CSS et non à vos éléments a .

Ceci est un sélecteur pour un in div

.right-project-headline h2 a {
    text-decoration: none;
    color: black;
    position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}
.right-project-headline h2 a::before {
  left: 0;
}
.right-project-headline h2 a::after {
  right: 0;
  transition: width 500ms ease;
}
.right-project-headline:hover h2 a::before {
  width: 100%;
  transition: width 500ms ease;
}
.right-project-headline:hover h2 a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

Ceci est le sélecteur pour un div déplacé en survol

 div:hover a

Et ceci est le sélecteur pour un div en survol

div a:hover

Cela devrait donc faire l'affaire

div a

0 commentaires

1
votes

Vous devez attraper l'événement de survol sur l'élément avec la classe .right-project-headline , puis appliquer le style aux éléments à l'intérieur, comme ceci:

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

Exemple complet:

.right-project-headline {
   border: 1px solid red;
}

.right-project-headline a {
    text-decoration: none;
    color: black;
    position: relative;
}

.right-project-headline a::before, .right-project-headline a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}

.right-project-headline a::before {
  left: 0;
}

.right-project-headline a::after {
  right: 0;
  transition: width 500ms ease;
}

.right-project-headline:hover a::before {
  width: 100%;
  transition: width 500ms ease;
}

.right-project-headline:hover a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

.right-project-headline:hover a::before {
  width: 100%;
  transition: width 500ms ease;
}

.right-project-headline:hover a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

0 commentaires

3
votes

Je simplifierais votre code comme ci-dessous et appliquerais un effet de survol sur le conteneur parent

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) var(--p,0%) 55%/var(--p,0%) 4px no-repeat;
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  --p:100%;
}

Voici une autre syntaxe pour background-position (plus intuitive):

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) no-repeat;
  background-size: 0% 4px; 
  background-position: left 0 top 55%; 
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  background-size: 100% 4px; 
  background-position: right 0 top 55%; 
}

Un autre avec la version abrégée et moins de code:

<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) no-repeat;
  background-size: 0% 4px; /*left:0 top:55%*/
  background-position: 0% 55%; /*left:0 top:55%*/
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  background-size: 100% 4px; /*width:100% height:4px*/
  background-position: 100% 55%; /*right:0 top:55%*/
}

3 commentaires

Bon, votre effort vaut +1!

J'adore l'utilisation de moins de code, mais cette version est un peu boguée si vous ne survolez pas suffisamment le lien pour terminer l'animation, elle rebondira vers la gauche au lieu d'aller à droite. Mais merci quand même :)

@KongGeorg augmente un peu la vitesse pour être sûr qu'elle se terminera;)