Problème avec un "hover" sur un texte qui n'existe pas

Résolu/Fermé
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 8 oct. 2022 à 13:03
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 9 oct. 2022 à 07:02

Bonjour,

Je vais tenter d'être clair ;)

J'ai une animation (zoom sur une image) réalisée lors d'un hover sur un texte.

Je vous donne mon HTML :

<div id="textasiat" class="niveau1" "textasiat">
    <p class="textasiat" "animClass">  <a href="#">bol</a><br />
        <a href="#">Ce lien sera</a><br />
        <a href="#">Ce lien sera</a><br />
        <a href="#">Ce lien sera</a><br />
        <a href="#">Ce lien sera</a><br />
        <a href="#">Ce lien sera</a><br /></p>

Le souci, c'est que le hover existe au dessus du <a href= "#">bol</a>, comme si il y avait un texte invisible.

Si je fais un code plus propre :

	<ul id="textasiat" class="niveau1" "textasiat" "animClass">
    <li><a href="#ancre_1">Ce lien sera</a></li>
    <li><a href="#ancre_2">Ce lien sera</a></li>
    <li><a href="#ancre_3">Ce lien sera</a></li>
    <li><a href="#ancre_4">Ce lien sera</a></li>
	</ul>


L'image disparaît :(

Je vous donne mes CSS :

#textasiat{
	padding: 0;
	height: auto;
	bottom: auto;
	left: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	top: 0px;
	position: absolute;
	margin-top: 500px;
	font: 100px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	text-decoration: none;}

		  }
a:hover {
color: gold;
text-decoration: none;}

.animClass {
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left: auto;
	bottom: auto;
	float: right;
	margin-top: 0px;
}

#imagasiat{
	padding: 0;
	height: auto;
	bottom: auto;
	left: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	top: 0px;
	position: absolute;
	width: 1000px;
	height: 50px;;
	margin-top: 20px;
	background-color: yellow;
    -webkit-transition: -moz-transform .3s ease-out; 
   -moz-transition: -webkit-transform .3s ease-out; 
   -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
		  }


.niveau1:hover + .niveau2 {	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);}

Me voilà perdu pour quelque chose qui me semble simple :/

Merci pour votre aide,

LM
Macintosh / Chrome 106.0.0.0

3 réponses

arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 9
8 oct. 2022 à 13:11

Bonjour,

Est-il possible que la séquence html que tu nous as soumise se trouve incluse dans une division de la classe niveau1 ou bien niveau2?

0

Bonjour arscy,

Je ne comprends pas trop :/

Voici le HTML complet du code "propre" :

<div id="header">
	
	  <ul id="textasiat" class="niveau1" "textasiat" "animClass">
    <li><a href="#ancre_1">Ce lien sera</a></li>
     <li><a href="#ancre_2">Ce lien sera</a></li>
     <li><a href="#ancre_3">Ce lien sera</a></li>
     <li><a href="#ancre_4">Ce lien sera</a></li>
	</ul>

  </div>
    <div id="imagasiat" class="niveau2"></div>

	</header>

Merci pour ton aide, bon week-end,

LM

0
arscy Messages postés 173 Date d'inscription dimanche 26 janvier 2014 Statut Membre Dernière intervention 5 octobre 2023 9
Modifié le 8 oct. 2022 à 13:59

Tout d'abord, pense à respecter l'indentation, c'est essentiel dans le code, ça te permet de te repérer plus facilement (la structure du code + d'éventuelles erreurs/oublis). Dans certains langages ça détermine le sens do code d'ailleurs (e.g. Python). La règle : tu ouvres une <div> → tu indentes. Tu fermes une <div>, tu réduis ton indentation. Il doit y avoir une symétrie horizontale avec les <div> </div> : ce que tu crées en haut, tu le retrouves dans le même axe vertical en bas.
Une fois ton code restructuré ça donne :
 

   <div id="header">	
      <ul id="textasiat" class="niveau1" "textasiat" "animClass">
         <li><a href="#ancre_1">Ce lien sera</a></li>
         <li><a href="#ancre_2">Ce lien sera</a></li>
         <li><a href="#ancre_3">Ce lien sera</a></li>
         <li><a href="#ancre_4">Ce lien sera</a></li>
      </ul>
   </div>
   <div id="imagasiat" class="niveau2"></div>
</header> <!-- il y a un orphelin ici -->

Ici on se rend compte que tu as nommé une div d'identifiant "header" et qu'après avoir fermé cette div tu fermes <header> lequel n'existe pas _ ou bien il s'agit d'un copier/coller qui n'a pas tout englobé.

Ensuite, la classe de ton <ul> pourrait comprendre tout dans les mêmes guillemets :

<ul id="textasiat" class="niveau1 textasiat animClass">

Là, assez clairement, on sait à quoi font référence textasiat et animClass : ce sont des classes.
Et enfin, tu fais allusion à une image,
alors autant je comprends la référence via l'identifiant, mais à aucun moment je ne trouve de trace de l'image en question, ni dans le html, ni dans le css. Donc si à un moment tu as eu un affichage, est-il possible que tu aies effacé une ligne de ton css par exemple? (la ligne qui contient le chemin vers ton image?).

Ajuste ton code et tiens-nous au courant.

1
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
9 oct. 2022 à 07:02

Bonjour arscy,

Merci de ton aide :)

Pour l'indentation, je suis désolé. Tu as raison...

Pour le header, je viens de comprendre :D

Pour les guillemets, je ne savais pas ;) J'apprends... petit à petit...

Pour ce qui est de l'image, elle n'existe pas encore, je fais le simplement le test actuellement avec une div.

Je reviendrais dans ce topic si problème il y a.

Pour le souci initial, il est résolu mas je ne sais pas comment, j'ai fait le ménage dans le code, supprimé le <header> etc.... Impossible de savoir ce qui posait problème. J'ai changé aussi les CSS mais pour autre chose.

Mais c'est réglé. Pardon de ne pas avoir d'autre explication.

Merci beaucoup en tous cas :D

0