Afficher / cacher un div au survol d'une image

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par bradeux, 27 Août 2010.

  1. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0
    Bonjour à tous,

    J'ai trouvé sur internet un petit bout de code bien utile pour afficher / cacher des divs au survol d'une image.
    (http://forum.alsacreations.com/topic-5-41262-1-RESOLU-JQuery-et-affich ... image.html)

    Voici mon code final :

    Code:
    <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
    $(function() {
    	$('.bulle-infos').hide();
    	$('.img').hover(
    
    function () {
    	$(this).next().fadeIn();
    	}, 
    function () {
    	$(this).next().fadeOut();
    	});
    
    });
        </SCRIPT>
    
        	<div class="img">
                <img src="image.jpg" />
            </div>
        
        	<div class="bulle-infos">test</div>
    

    Seulement voila, comment faire pour que lorsque je survole le div bulle-infos, celui-ci reste ouvert?
    Pour le moment si je quitte l'image, le div se referme.
    J'aimerai qu'il reste afficher si je survole le div bulle-infos. (par contre qu'il se re-ferme bien si je quitte toute la zone (img + bulle-infos).

    Une idée ?

    Merci!!
     
  2. boby55
    boby55 WRInaute occasionnel
    Inscrit:
    2 Avril 2008
    Messages:
    359
    J'aime reçus:
    0
    JS :
    Code:
    OnMouseOver
    et
    Code:
     OnMouseOut
    sur le div en question.
     
  3. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0
    Tu peux m'en dire plus ?
    On peut mettre un OnMouseOver sur un div ?

    Merci!
     
Chargement...
Similar Threads - Afficher cacher div Forum Date
Afficher/cacher données dans un tableau Développement d'un site Web ou d'une appli mobile 9 Mars 2019
Afficher / cacher la publicité aux moteurs de recherche Débuter en référencement 13 Février 2011
Petite aide en Javascript (afficher, cacher, délais, stop) Développement d'un site Web ou d'une appli mobile 1 Mars 2009
Afficher les tags sur wordpress Développement d'un site Web ou d'une appli mobile 3 Août 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
Google My Business :Comment afficher sa zone de couverture et pas son adresse ? Google : l'entreprise, les sites web, les services 19 Juin 2019
Afficher des valeurs d'une colonne à l'autre selon condition Développement d'un site Web ou d'une appli mobile 11 Février 2019
Google Chrome va afficher à nouveau les sous-domaines Google : l'entreprise, les sites web, les services 18 Septembre 2018
Google PageSpeed Insight : Afficher en priorité le contenu visible Développement d'un site Web ou d'une appli mobile 16 Août 2018
Afficher valeur id onclick sur checkbox Développement d'un site Web ou d'une appli mobile 21 Février 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice