Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je veux rendre invisible une image au passage de la souris et cela en html
Décrivez ici votre code ou ce que vous cherchez à faire

En html, rendre invisible une image (le code ci-dessous qui fonctionne) au passage de la souris puis le faire réapparaitre si la souris ne l'ai plus.
Entourez votre code avec ce symbole <div style="background-image: url(http://jeanneton.com/jeannetonphpapp//images/a_bg1.jpg);" id="botarea"> ```

Ce que je veux

En html, rendre invisible une image (le code ci-dessus qui fonctionne) au passage de la souris, puis le faire réapparaitre si la souris ne l'ai plus. Abracadabra. 5quiou.

Ce que j'obtiens

Le code ci-dessus marche c'est juste que j'aimerai le voir disparaitre au passage de ma souris.

13 réponses


Husky_3d
Auteur
Réponse acceptée

Ok c'est bon je vous laisse tranquille. J'ai trouvé une sorte de solution qui ne résoud que la moitié des choses mais pour un néophyte comme moi ça m'ira.
Merci à tous. :0)
Sy.

Bonjour
Revérifie ton sujet qu'est pas top niveau présentation et surtout ton code n'apparait pas.
pour le coup si tu as une image dans le css tu peux faire ça

img:hover{
    opacity:0;
}

ou avec une transition que ce soit plus joli

img{
    transition: opacity .4s;
}
img:hover{
    opacity:0;
}

Attention la ça marche avec toutes les images de ton site. Si tu veux que cet effet ne soit effectif que sur certaines image alors tu n'a qu'à créer une class exemple class="superimagedelamort"
du coup si tu fait

img.superimagedelamort{
    transition: opacity .4s;
}
img.superimagedelamort:hover{
    opacity:0;
}

Alors l'effet ne concernera que les images avec la class superimagedelamort.

Bonsoir,

Sinon tu aurais aussi pu le faire avec Visilibily Hidden, la différence avec display : none c'est qu'avec visibility Hidden le bloc reste toujours présent (il gardera sa place dans la page) mais ne sera pas affiché.

Ou tu aurais pu également le faire avec du jQuery avec .hide :D

Husky_3d
Auteur

Ok merci de répondre si vite c'est génial je vais déjà regarder ce que tu m'as gentillement donné.
Comment faire pour que mon code apparaisse ? Toutes ces façons de coder me sont Alien mais tu n'auras pas à me le dire deux fois je pige vite, mais Car en fait je voudrai pouvoir effacer et réapparaitre à loisir n'importe quel type de code, mais en html.
Amicalement
Sy.

Husky_3d
Auteur

Oulala ! Doucement avec les jQuery avec .hide... Je sais que c pénible d'échanger des trucs techniques avec des ignards (mais j'ai d'autre qualités :0) ) Il va vous falloir être patients. Pour l'infos j'essaie d'améliorer visuellement mon chatterbot Jeanneton. http://jeanneton.com/.
Merci

Husky_3d
Auteur

Désolé. Voilà le code HTLM que j'aimerai faire disparaitre ou apparaitre à volonté en passant ma
souris sur son image. Je préférerai un réponse en html et non en .css. Merci. Paix sur ta couche l'ami.
<div style="background-image: url(http://jeanneton.com/jeannetonphpapp//images/a_bg1.jpg);" id="botarea">

Husky_3d
Auteur

Je vais y arrivé... Dans le message précédent c le code qui fonctionne et s'affiche que j'aimerai faire disparaitre au passage de ma souris et vie et versa faire réapparaitre quand la souris est ailleurs la fourbe... Paix sur ta couche l'ami. Sy.

Bah le truc c'est que je ne vois pas comment tu veux afficher et faire disparaitre une div sans utiliser au moins du CSS.

Il faut remettre les choses dans son contexte, c'est un forum d'entraide et non ou on code pour les autres ... ta question a ete resolu.
Pour te faire comprendre rapidement et simplement ce qu'est l´HTML et le CSS :
Imagine un diaporama, dans celui co tu voudras mettre des titres, des images, des paragraphes c'est l'equivalent de l'HTML. Si tu veux mettre en rouge gros et gras ton texte tu va le faire avec un outil et bien c'est l'équivalent du CSS.
Tu ne peut pas developper sans CSS, plusieurs solution ont ete donne a toi de choisir celle qui correspond le mieux
(envoye de mon telephone)

Husky_3d
Auteur

Non pas vraiment résolu. Ne crois pas que je veux du code gratos c'est pas mon truc et tu ne peux pas imaginer à quel point je me suis cassé la tête avant de me décider à oser demander ici à des pros. Donc je retente ma chance. C'est code .css si-dessous que j'aimerai bien faire disparaitre ou non au survole de la souris. Ou plus simple mettre le background-size:100% à 1% à ce même survole.



    background-repeat:no-repeat;
    background-color:#ffffff;
    background-size:100%;  /* ICI TAILLE DE L IMAGE BACKGROUND SKY */
    height:80%;

    -webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.48);
-moz-box-shadow:    0px 0px 3px 0px rgba(50, 50, 50, 0.48);
box-shadow:         0px 0px 3px 0px rgba(50, 50, 50, 0.48)
} ```
Un peu de souplesse après je vous laisse tranquille. Promis juré.
Amicalement merci
Sy

Bonsoir.

Je préférerai un réponse en html et non en .css.

Je crois bien que tu n'as pas compris ce que sont les langages HTML et CSS, ce n'est pas parce que tu ne mets pas du code CSS dans un fichier avec l'extension css que ce n'est pas du code CSS mais du code HTML.
Tout ce que tu fais, c'est intégrer du CSS dans tes balises HTML via l'attribut style au lieu de placer ton code CSS dans un fichier à part (extension css).

Ben ouais...
Underscreen à parfaitement répondu, suis ses conseils.