Effacer une image..

Version imprimable

Effacer une image..

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:

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>

14/05/2021, 12h09
ProgElecT

Salut

Code:

p:hover img{opacity: 0;} /* -------- l'image disparait ------- */
14/05/2021, 14h26
jpmalb

..merci de ta réponse mais je me suis sans doute mal exprimé :oops: 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é...

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:

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 :aie:

15/05/2021, 09h00
jpmalb

...effectivement, ça marche :D .. c'était une bonne "id"...merci encore

A savoir

Code:

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

15/05/2021, 13h15
jpmalb

c'est surtout l'utilisation du tilde (~) que je ne maitrise pas...et ça ouvre des horizons...:D
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).
@+
15/05/2021, 17h05
jpmalb

euh... me revoilà et la ligne d'horizon recule au fur et à mesure que j'avance...:oops:.
...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...

Salut

Bien que, une discussion :fleche: 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:

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>

17/05/2021, 09h41
jpmalb

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..:D
@+
18/05/2021, 16h50
NoSmoking
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:

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:

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:

1 2 3 4 <p> <a>Le lien</a> <span style="display:block">Bla bla ...</span> </p>
Là les sélecteurs retrouveront leurs petits.
19/05/2021, 08h54
jpmalb

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