Bonjour,

J'essaie tant bien que mal de faire apparaître une img2 au survol d'une img1, qui elle-même apparaît au survol d'une ligne d'un tableau, mais en vain.

L'img1 apparaît bien au survol de la ligne du tableau donc j'ai réutilisé le même code mais ça ne marche pas... Pourquoi?

Mon code php:

<?php
$reponse = $bdd->query('SELECT * FROM inventaire_actuel'); 
while ($donnees = $reponse->fetch()) 
   { 
 ?>  	
   	  
		   	 <tr>
		   	 	    <td><?php echo $donnees['name']; ?>
		   	 	    	<img class="structure_blue" title="Mouse over to show structure"  src="structure-blue.png">
		   	 	    	<img class="imageMolecule" src="images\<?php echo $donnees['picture']; ?>">
			   	 	  </td>
		          <td><?php echo $donnees['CAS']; ?></td>
		          <td><?php echo $donnees['formula']; ?></td>
		          <td><?php echo $donnees['MW']; ?></td>
		          <td><?php echo $donnees['quantity']; ?></td>
		          <td><?php echo $donnees['room']; ?></td>
		          <td><?php echo $donnees['purity']; ?></td>
		          <td><?php echo $donnees['supplier']; ?></td>
		          <td><?php echo $donnees['reception']; ?></td>
		          <td><?php echo $donnees['user']; ?></td>
		          <td style="display:none"><?php echo $donnees['id']; ?></td>
		      </tr>
     
<?php
               
	}
?>

mon css:

table tr.selectedLigne{
   background-color:#d7e7f7;/*#b4e579; si vert*/
   color:#000;
}
table tr:hover{
  background-color:#d7e7f7;
  cursor: pointer;
  }
.structure_blue /*format de la structure bleue*/
{
   float: right;
   width: 20px;
   height: 20px;
   display: none;
}
.imageMolecule
{
   position: relative;
   display: none;
   width: 100px;
   height: 100px;
   z-index: 99;
}
table tr:hover .structure_blue /*affichage de structure bleue si survol de la ligne*/
{
    display: block;
}
.structure_blue:hover .imageMolecule /*affichage de l'image de la molécule si survol de structure bleue*/
{ 
    display: block;
}    

-
Edité par BGr45 14 octobre 2021 à 15:13:16

Bonsoir,

Tu as deux problème pour que cela fonctionne.

Premièrement, tu ne cibles pas correctement ton deuxième hover. Ta deuxième image est sœur de la première, hors toi tu cibles comme si la deuxième était sont enfant.

Ceci :

.structure_blue:hover + .imageMolecule

Te permettra de cibler correctement ta deuxième image.

Et pour que cela fonctionne vraiment, il faudra retirer le float: right sur ta première image. En appliquant un float, tu sort l'élément de son flux et donc sa hauteur n'es plus comprise par ton navigateur. Il te faudra revoir légèrement ton code pour que garder ta mise en forme sans float.

Ton code fonctionnel : https://jsfiddle.net/orL1dusp/

-
Edité par Lord Morpheus 14 octobre 2021 à 23:27:02

Super @Lord Morpheus,

C'est exactement ce que je cherchais!

Effectivement l'histoire des images soeur/enfant j'avais pas du tout pigé. Pour moi c'était pourtant l'enfant (?!no comprendo!?)

Et l'histoire du float, fallait le savoir, bien vu!

Un grand merci!

-
Edité par BGr45 15 octobre 2021 à 9:31:25