Discussion :

[pilan]

Bonjour,

Alors j'espère pouvoir bien faire comprendre ma problématique.

Je souhaite faire apparaitre une animation à droite du container (=un background qui s'agrandit horizontalement au survol avec un rotate de l'icon).
Je souhaite faire apparaître le check avec son background au survol de l'article. Poussant l'élément .element-price vers la gauche .
Mais au survol de la souris ça ne s'affiche pas, je suis obligé de cliqué.
Mais mon code ne fonctionne pas.

Je pense que je choisi mal l'élement car, le hover doit se faire dans la globalité de l'article, alors que l'animation au hover se produit seulement si je suis dans ma classe .element-price.



Je suis junior, et en plein apprentissage, d’où mon incompréhension
Vos explications ou pistes seront très utiles.
Merci de votre aide.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.element-price {
  transition: 1s linear 0s;
}
.element-price::after {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-size: 1.5em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -1em;
  right: -1em;
  height: 100%;
  border-radius: 0em 1em 1em 0em;
  opacity: 0;
  background-color: var(--color-tertiary);
  transition: 1s linear 0s;
}
.element-price:hover {
  text-indent: -30px;
}
.element-price:hover::after {
  opacity: 1;
  text-indent: 0px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<article class="article-second-page">
                    <div class="text-item">
                      <h4>Une escapade en Italie</h4>
                      <p class="Explain">Hôtel premium</p>
                      <div class="element-price">35€</div>
                    </div>
                  </article>

Pièce jointe 598444

[pilan]

J'ai revu déjà ma structure html qui n'était pas bonne.
Et rajouté une class directement dans la balise du i .

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
                  <article class="article-second-page">
                    <div class="text-item">
                      <h4>Une escapade en Italie</h4>
                      <p class="Explain">Hôtel premium</p>
                      <div class="element-price">35€</div>
                       <div><i class="fas fa-check-circle check"></i></div>
 
                  </article>

[NoSmoking]

Bonjour,

Je pense que je choisi mal l'élement car, le hover doit se faire dans la globalité de l'article, alors que l'animation au hover se produit seulement si je suis dans ma classe .element-price.

tu as donc la réponse dans ton questionnement

[pilan]

Oui, et tout fonctionnement correctement maintenant que j'ai choisi directement la balise article, plus qu'a faire les animation avec transition et tranforme pour faire grossir l'élémenet horizontalement.

Je vais réussir, merci pour le retour.