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 ---- */

**jpmalb** · 15/05/2021, 13h15

c'est surtout l'utilisation du tilde (~) que je ne maitrise pas...et ça ouvre des horizons...

Sélectionner tous les éléments suivant un autre élément en CSS
Le caractère ~ va nous être plus permissif que le caractère + en nous permettant cette fois-ci de sélectionner tous les éléments déclarés après un autre élément en HTML de même niveau (c’est-à-dire possédant le même parent direct).
@+

**jpmalb** · 15/05/2021, 17h05

euh... me revoilà et la ligne d'horizon recule au fur et à mesure que j'avance...

.
...est-il possible de faire apparaître une seconde image quand la première disparaît lors du survol ?

<p class="second"><img src="abientot.gif></p>
a:hover .second img{display:left;} ".second img" n'est pas non plus accessible...

**ProgElecT** · 16/05/2021, 21h36

Salut

Bien que, une discussion

une question .....

J'ai attendu pensant qu'un plus érudit que moi apporterait une solution CSS, moi je n'en n'ai pas trouvée ..... mais voici une solution JavaScript

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
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<title>Ici mon titre</title>
	</head> 
   <style>
      a:hover {background-color:yellow;}   /*-----le lien change de couleur au survol*/
      
      #MEDiv{ /* initialisation de la première image vue au démarrage du programme */
        margin-top: 15px;
        height:50px;
        width:48px;
        border-style: solid;
        border-radius: 5px 20px 5px 20px;
        background-repeat:no-repeat;
        background-image: url("https://www.developpez.net/forums/images/smilies/whistle.gif");
        box-shadow: 5px 5px 5px;
      }
    </style>
  <script>
      function ChangeImage(url){
        document.getElementById("MEDiv").style.backgroundImage="url('"+url+"')";
     }
  </script>
  <body>
   <p><a href="#" onmouseenter="ChangeImage('https://www.developpez.net/forums/images/smilies/wavey.gif')" onmouseout="ChangeImage('https://www.developpez.net/forums/images/smilies/whistle.gif')">Retour Menu</a><br /><div id="MEDiv"></div></p>
  </body>
</html>

**jpmalb** · 17/05/2021, 09h41

Bonjour
no problem...de mon côté j'étais en train de labourer les forums pour essayer de trouver une réponse à ma question...
D'après ce que j'ai pu en comprendre et en retirer , une action sur un un sélecteur a un résultat restreint dès que l'on sort de <div> ou <p>.
Ainsi " .autre img:hover {opacity: 0;body background-color:lightblue;} " va faire disparaître l'image mais ne va pas passer le fond en bleu clair.... (bon, il n'est pas exclu que ma syntaxe soit erronée, il m'arrive fréquemment d'omettre des points ou autres signes...toujours mon côté débutant

)...
c'est peut-être aussi une réaction simpliste ...si on peut faire cela, pourquoi pas cette autre chose qui ne semble pas plus compliquée...
En tout cas, je poursuis et je te remercie de ton intérêt et de ce partage..bien sympa..

@+

**NoSmoking** · 18/05/2021, 16h50

Bonjour,
attention avant d'utiliser les sélecteurs d'« adjacence » il est impératif de vérifier la conformité du code HTML.

Si l'on prend comme code de départ, à savoir :

Code html :

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

1
2
3
4
<p>
  <a>Le lien</a>
  <div>Bla bla ...</div>  
</p>

la structure étant incorrecte, un élément <div> ne peut être contenu dans un élément <p>, les navigateurs corrigeront cette anomalie et utiliserons la structure suivante :

Code html :

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

1
2
3
4
<p>
  <a>Le lien</a>
</p>
<div>Bla bla ...</div>

Les sélecteurs s'en trouvent un peu perdu !!

La solution si l'on souhaite continuer à utiliser le :hover avec le « general sibling combinator tilde (~) » est d'utiliser un élément inline et lui conférer un mode de rendu block, par exemple :

Code html :

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

1
2
3
4
<p>
  <a>Le lien</a>
  <span style="display:block">Bla bla ...</span>
</p>

Là les sélecteurs retrouveront leurs petits.

**jpmalb** · 19/05/2021, 08h54

ok bien vu...je prends en compte..merci

Effacer une image..

CSS

Discussions similaires

Partager

Partager