Effacer une image..

**jpmalb** · 14/05/2021, 11h27

Bonjour
Débutant dans ce genre, je cherche à faire disparaitre une image lors du survol d'un lien..et je n'y parviens pas ... pourquoi ? ....un petit coup de pouce ? Merci
/*----------------------------------*/

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<head>
	<title></title>
</head>
 
<style type="text/css">
a:hover {background-color:yellow;}   /*-----le lien change de couleur au survol*/
a:hover .pens img{ opacity: 0;}       /*  --------mais  l'image ne disparait pas...*/
</style>
 
<body>
  <p class="menu"><a href="#">Retour Menu</a></p>
 <p class="pens"><img src="penseur.jpg"></p>
</body>
</html>

**ProgElecT** · 14/05/2021, 12h09

Salut

Code CSS :

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

p:hover img{opacity: 0;}       /*  -------- l'image disparait ------- */

**jpmalb** · 14/05/2021, 14h26

..merci de ta réponse mais je me suis sans doute mal exprimé

car ça ne correspond pas à ma demande...

En effet, quand j'intègre "p:hover img{opacity: 0;} " l'image apparaît effectivement à l'écran et disparait quand je suis sur l'image et non pas sur le lien 'Retour Menu"..

...ce je voudrais, c'est qu'elle soit présente à l'ouverture et qu'elle disparaisse quand "Retour Menu" est survolé.

.je pensais que "a:hover .pens img{opacity:0;}" identifierait l'image (penseur)et que l'action de "hover" entrainerait l'opacité...

**ProgElecT** · 14/05/2021, 22h23

Salut

En pure CSS avec ta construction HTML je ne pense pas que cela soit possible.
En changent la structure, en CSS cela pourrait donner

Code HTML :

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
<!DOCTYPE html>
<html lang="fr">
  <head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Mon titre</title>
     <style type="text/css">
      a:hover {background-color:yellow;}   /*-----le lien change de couleur au survol*/
      a:hover ~ img{opacity: 0;}       /*  ------- maintenant cela fonctionne ...*/
      #MEimg{margin-top: 15px}
    </style>
  </head>
 
  <body>
    <p class="menu"><a href="#">Retour Menu</a><br /><img id="MEimg" src="penseur.jpg"></p>
  </body>
</html>

mais je suis peut être encore à coté de la plaque

**jpmalb** · 15/05/2021, 09h00

...effectivement, ça marche

.. c'était une bonne "id"...merci encore

**ProgElecT** · 15/05/2021, 10h07

A savoir

Code CSS :

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

1
2
3
      a:hover ~ img{opacity: 0;}           /*  ------ l'image disparait ----*/
      /* a:hover ~ img{visibility:hidden}  /*  -------- idem de la ligne au dessus ---- */
      /* a:hover ~ img{display:none}       /*  ---- l'image disparait  mais l'element suivant prend la place de l'image ---- */

Effacer une image..

CSS

Vue hybride

Discussions similaires

Partager

Partager