web-dev-qa-db-fra.com

Comment afficher les divs cachés au survol de la souris?

Comment afficher un ensemble de masques div divisés?

Par exemple :

<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>

Tous les div doivent être affichés lors de l'événement Souris.

javascriptjqueryhtmlcssmouseover
23
Jack P.

Si les divs sont masquées, elles ne déclencheront jamais l'événement mouseover.

Vous devrez écouter l'événement d'un autre élément non caché.

Vous pouvez envisager d'encapsuler vos divs cachés dans des divs de conteneur qui restent visibles, puis d'agir sur l'événement mouseover de ces conteneurs.

<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

Vous pouvez également écouter l'événement mouseout si vous souhaitez que le div disparaisse lorsque la souris quitte le conteneur div:

onmouseout="document.getElementById('div1').style.display = 'none';"
52
Daniel Vassallo

Vous pouvez envelopper le div caché dans un autre div qui basculera la visibilité avec les gestionnaires d'événements onMouseOver et onMouseOut en JavaScript:

<style type="text/css">
  #div1, #div2, #div3 {  
    visibility: hidden;  
  }
</style>
<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>

<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
  <div id="div1">Div 1 Content</div>
</div>
<div onMouseOver="show('div2')" onMouseOut="hide('div2')">
  <div id="div2">Div 2 Content</div>
</div>
<div onMouseOver="show('div3')" onMouseOut="hide('div3')">
  <div id="div3">Div 3 Content</div>
</div>
12
Trey Hunner

Il existe un moyen très simple de le faire uniquement en CSS.

Appliquez une opacité à 0, la rendant ainsi invisible, mais elle réagira toujours aux événements JavaScript et aux sélecteurs CSS. Dans le sélecteur de survol, rendez-le visible en modifiant la valeur d'opacité.

#mouse_over {
  opacity: 0;
}

#mouse_over:hover {
  opacity: 1;
}
<div style='border: 5px solid black; width: 120px; font-family: sans-serif'>
<div style='height: 20px; width: 120px; background-color: cyan;' id='mouse_over'>Now you see me</div>
</div>
8
bitbyte

Passez la souris sur le conteneur et passez la souris sur les divs J'utilise ceci pour les menus jQuery DropDown principalement:

Copiez le document entier et créez un fichier .html que vous pourrez découvrir par vous-même!

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>The Divs Case</title>
            <style type="text/css">
            * {margin:0px auto;
            padding:0px;}

            .container {width:800px;
            height:600px;
            background:#FFC;
            border:solid #F3F3F3 1px;}

            .div01 {float:right;
            background:#000;
            height:200px;
            width:200px;
            display:none;}

            .div02 {float:right;
            background:#FF0;
            height:150px;
            width:150px;
            display:none;}

            .div03 {float:right;
            background:#FFF;
            height:100px;
            width:100px;
            display:none;}

            div.container:hover div.div01 {display:block;}
            div.container div.div01:hover div.div02  {display:block;}
            div.container div.div01 div.div02:hover div.div03 {display:block;}

            </style>
            </head>
            <body>

            <div class="container">
              <div class="div01">
                <div class="div02">
                    <div class="div03">
                    </div>
                </div>
              </div>

            </div>
            </body>
            </html>
3
Evilalan

Option 1 Chaque div est spécifiquement identifié, donc tout autre div (sans les ID spécifiques) sur la page n'obéira pas à la pseudo-classe: hover.

<style type="text/css">
  #div1, #div2, #div3{  
    display:none;  
  }  
  #div1:hover, #div2:hover, #div3:hover{  
    display:block;  
  }
</style>

Option 2 Toutes les divs de la page, indépendamment des ID, ont un effet de survol.

<style type="text/css">
  div{  
    display:none;  
  }  
  div:hover{  
    display:block;  
  }
</style>
2
Christopher Altman