Показать div при наведении мыши

Если вам требуется сделать блок, который всплывает при наведении мыши, то этот урок для вас. Живой пример.

Итак, javascript:

<script type="text/javascript">
    sid = '';
    function show(id){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
        }
        document.getElementById(id).style.display = "block";
        sid = id;
        t = setTimeout("hideall()", 5000);
    }
   
    function smarthider(){
        t = setTimeout("hideall()", 5000);
    }
   
    function hideall(){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
            sid = '';
        }
    }
</script>

 

Разметка:

<div  align="center"><a href="#" onmouseover="hideall();">Спрятать</a> | <a href="#"  onmouseover="show('bl1');">Показать блок №1</a> | <a href="#" onmouseover="show('bl2');">
  Показать блок №2</a>
  </div>
 
  <div id="bl1" align="center" style="display:none; padding-top:200px; color:#C63D7A; font-size:30px;border:2px dashed #ccc; background-color:#eee;" onmouseover="clearTimeout(t)" onmouseout="smarthider()">
  Всем привет! Я блок номер один!
  </div>
 
  <div id="bl2" align="center" style="display:none; padding-top:200px; color:#C63D7A; font-size:30px;border:2px dashed #ccc;background-color:#eee;" onmouseover="clearTimeout(t)" onmouseout="smarthider()">
  Здравствуйте все! Я блок номер два!
  </div>


 

В чем чудеса?

onmouseover="show('bl1');" —  при наведении на ссылку, выполняется функция показать. Где bl1 — это id блока. 

onmouseover="show('bl2');" — то же самое, что и в первом случае, только id блока — bl2

onmouseover="hideall();" — при наведении на ссылку, вызывается функция hideall, а эта функция присваевает нашим блокам значение "display: none"

onmouseover="clearTimeout(t)" — при наведении на наш блок, очищается интерва скрытия блока. Т.к. сейчас он 5 секунд, и если мы в течении этого времени не наведем мышью на открытый блок, он исчезнет. А если наведем, то таймаут обнулится.

onmouseout="smarthider()" — при отведении курсора мыши, запускается функция smarthider. Она скрывает блок через 5 секунд.

 

Использовать даже этот простой прием можно по разному. Все зависит лишь от вашей фантазии.