interaction entre une image et le texte souligné p

Sujet résolu

12 mai 2024 à 14:14:03

Bonjour,

J'ai un code html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>test de lien</title>
</head>
<body>
<h2>Test de lien avec une partie soulignée puis descente scrollée</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit aspernatur illum, obcaecati cupiditate dicta magnam et quam facilis provident minima, ea blanditiis maiores ipsum earum, esse soluta doloribus repellendus deleniti.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores earum facilis perferendis reiciendis rem vitae esse! Temporibus earum sit quis.</p>
<table>
    <tr>
        <td class="pouce" title="cliquez pour aller aux avis">
            <div class="avis">
                    <a href="#"><img src="images/emoticone/star_orange.png"><div class="avisSoulignement"> 35 avis</div></a>
            </div>
        </td>
    </tr>
<!-- Fin bouton nombre d'avis -->
</table>
<!-- <script src="lien.js"></script> -->
</body>
</html>

et le code css :

/* Début produits.inc.php -*/
body {
  width: 30%;
  margin: auto;
}
.pouce {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.pouce img {
  width: 35px;
  margin-right: 10px;
}
.avis a {
  text-decoration: none;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.avis a:hover {
  opacity: 0.8;
}
.avis a .avisSoulignement {
  width: auto;
  text-align: center;
}
.avis a .avisSoulignement::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: #427f0a;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}
.avis a .avisSoulignement:hover::after {
  transform: scale(1);
}
/* Fin partie .pouce */

Une capture d'écran de mon souci :

Au survol de la souris, lorsque je clique sur le texte, celui-ci se souligne progressivement, le lien fonctionne...

Mais, lorsque je survole l'étoile, j'aimerai que le texte se souligne également... Pour faire court, à chaque endroit du lien, je voudrais que le texte se souligne.

Je ne sais par quel bout prendre ce problème...

Déjà une question me turlupine, est-ce faisable par le css? Et, si oui, pouvez-vous m'aiguiller, SVP?

Cordialement

Arnauld

Lamecarlate

13 mai 2024 à 8:23:52

Bonjour,

première chose : pourquoi une table ? Ce n'est pas fait pour de la mise en page.

Ensuite : as-tu essayé de mettre a::after au lieu de a .avisSoulignement::after aux lignes 29 et 38 ? Si oui, qu'est-ce que cela donne ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Arnober

13 mai 2024 à 12:43:44

Bonjour,

Merci pour ta réponse.

Pour la table, c'est un test que j'ai fait à partir d'un site que je revois, c'est pour cette raison que j'ai honteusement recopié. J'ai modifié mon test depuis!!!

Si je supprime .avisSoulignement, c'est tout (image et texte) qui est souligné. Mon souhait est que lorsque je survole l'image ou le texte, il n'y ait que le texte (.avisSoulignement) qui soit souligné. Actuellement, lorsque je survole le texte, celui-ci se souligne (avec animation), mais lorsque je survole l'image, apparait l'infobulle mais le texte ne se souligne pas... Lien et infobulle fonctionnent très bien sur texte et image.

Cordialement

Arnauld

Lamecarlate

13 mai 2024 à 20:54:03

Ah ! OK, je n'avais pas bien compris ton besoin.

Je te propose de mettre

.avis a:hover .avisSoulignement::after

comme sélecteur à la ligne 38.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Arnober

13 mai 2024 à 22:00:58

Bonsoir,

Sitôt lu, sitôt essayé et sitôt ça fonctionne...

Mille merci... où m'étais-je fourvoyé, je croyais avir tout essayé... tu vas me faire passer une bonne nuit...

Encore une fois merci beaucoup.

Bonne soirée.

PS : Je passe en résolu.

Cordialement

Arnauld

Lamecarlate

14 mai 2024 à 9:11:11

Bonne continuation !

Pas d'aide concernant le code par MP, le forum est là pour ça :)