Comment montrer des divs cachés sur mouseover?

Comment afficher un ensemble de div cachés onmouseover?Comment montrer des divs cachés sur mouseover?

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 de doivent être montrés événement onmouseover.

Source

2010-04-25 Jack P.

S'il vous plaît fournir plus de détails. Sur mouseover de quoi? – SLaks

Que voulez-vous dire par divs cachés? Voulez-vous dire que la visibilité est définie sur "caché" ou que l'affichage est défini sur "aucun"? –

Question besoin d'amélioration, de clarification, plus de détails. – Jaanus

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

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

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 voulez que la div disparaisse lorsque la souris quitte le conteneur div:

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

Source

2010-04-25 04:03:24

Est-ce que cela fonctionne également pour les périphériques tactiles, par ex. mobile? – kurdtpage

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

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

Option 2 Tous divs sur la page, quelle que soit ID, ont pour effet de vol stationnaire.

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

Source

2010-04-25 04:08:08

Le problème avec cette solution est qu'il n'est pas possible de survoler une div qui n'est pas affichée. –

Oui, le contraire serait possible, mais pas comme ça. –

Ensuite, je voudrais utiliser la visibilité: la règle cachée/visible à la place. Bon point. –

Vous pouvez envelopper le div caché dans un autre div qui basculera la visibilité des 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>

Source

2010-04-25 04:24:11

Passez la souris sur le conteneur et aller en vol stationnaire sur le divs I Utilisez 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>

Source

2010-04-25 10:03:30 Evilalan

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 changeant 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>

Source

2014-12-22 22:01:41

wow c'est un bon conseil merci! c'est juste ce que je voulais, le rendant invisible mais déclenchant les événements – achecopar

Comment montrer des divs cachés sur mouseover?

Répondre

Questions connexes