web-dev-qa-db-ja.com

マウスオーバーで非表示のdivを表示する方法は？

隠されたdivのonmouseoverのセットを表示する方法は？

例えば ​​：

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

すべてのdivは、mouseoverイベントで表示する必要があります。

javascriptjqueryhtmlcssmouseover
23
Jack P.

Divが非表示の場合、mouseoverイベントはトリガーされません。

他の隠されていない要素のイベントをリッスンする必要があります。

非表示のdivを、表示されたままのコンテナdivにラップしてから、これらのコンテナのmouseoverイベントに作用することを検討できます。

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

マウスがコンテナdivから離れたときにdivを非表示にする場合は、mouseoutイベントをリッスンすることもできます。

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

JavaScriptのonMouseOverおよびonMouseOutイベントハンドラーで表示を切り替える別のdivで非表示のdivをラップできます。

<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

CSSのみの方法でこれを行うには、本当に簡単な方法があります。

不透明度を0に適用すると、不透明になりますが、それでもJavaScriptイベントとCSSセレクターに反応します。ホバーセレクターで、不透明度の値を変更して表示します。

#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

マウスをコンテナの上に置いて、divにカーソルを合わせます。これは主にjQuery DropDownメニューに使用します。

ドキュメント全体をコピーして、そこから自分で理解できる.htmlファイルを作成します！

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

オプション1各divは明確に識別されるため、ページ上の他のdiv（特定のIDなし）は：hover疑似クラスに従いません。

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

オプション2ページのすべてのdivは、IDに関係なく、ホバー効果があります。

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