Как показать скрытые div при наведении курсора? - PullRequest
Новая
       14

Как показать скрытые div при наведении курсора?

20 голосов
/ 25 апреля 2010

Как показать набор скрытого div'а на mouseover?

Например: 

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

Все div должны быть показаны на событии mmoverover.

Ответы [ 5 ]

49 голосов
/ 25 апреля 2010

Если div скрыты, они никогда не вызовут событие mouseover.

Вам нужно будет прослушать событие какого-то другого невидимого элемента.

Вы можете обернуть свои скрытые элементы 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>

Вы также можете прослушивать событие mouseout, если хотите, чтобы div исчезал, когда мышь покидает контейнер div: 

onmouseout="document.getElementById('div1').style.display = 'none';"
12 голосов
/ 25 апреля 2010

Вы можете заключить скрытый div в другой div, который переключит видимость с помощью обработчиков событий onMouseOver и onMouseOut в 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>
8 голосов
/ 23 декабря 2014

Существует действительно простой способ сделать это только с помощью 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>
3 голосов
/ 25 апреля 2010

Наведите курсор мыши на контейнер и наведите курсор мыши на элементы 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>
2 голосов
/ 25 апреля 2010

Опция 1 Каждый div определен специально, поэтому любой другой div (без конкретных идентификаторов) на странице не будет подчиняться псевдоклассу: hover. 

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

Опция 2 Все элементы на странице, независимо от идентификаторов, имеют эффект наведения. 

<style type="text/css">
  div{  
    display:none;  
  }  
  div:hover{  
    display:block;  
  }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...