Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Почему проподает div??? при наведении на его ссылк

Автор: Yagmort 15.1.2011, 23:37

Хотел сделать ввиде выпадающего меню но не получилось. Навожу на "Справочники" выпадает "1,2,3" хочу навести курсор на "1,2,3"-они исчезают:( где то я ошибся... кто поможет ?

Код


<html >
<head >
    <title></title>
    <style type="text/css">
        .diver
        {visibility:hidden;}
     </style>
<script type="text/javascript">
    function onMover(d) {
        document.getElementById(d).style.visibility = 'visible';
    };
    function onMout(d) {
       document.getElementById(d).style.visibility = 'hidden';
    };
</script>
</head>
<body>
                <table onmouseout="onMout('sprav');">
                   <tr><td><a href="" onmouseover="onMover('sprav');" >Справочники</a></td></tr>
                   <tr><td > 
                     <div id="sprav" style="width: 100%" class="diver">
                       <a href="">1</a>
                       <a href="">2</a>
                       <a href="">3</a>
                    </div>                 
                   </td></tr>
               </table>
</body>
</html>

Автор: Amphiluke 16.1.2011, 00:19

Вот вариант исправления ситуации:

Код


<html >
<head >
    <title></title>
    <style type="text/css">
        .diver
        {visibility:hidden;}
     </style>
<script type="text/javascript">
    function onMover(d) {
        document.getElementById(d).style.visibility = 'visible';
    };
    function onMout(e, d) {
       if (!e) e = event;
       var relTgt = e.relatedTarget || e.toElement;
       while (relTgt) {
           if (relTgt.id == "tb") {return;} else {relTgt = relTgt.parentNode;}
       }
       document.getElementById(d).style.visibility = 'hidden';
    };
</script>
</head>
<body>
                <table onmouseout="onMout(event,'sprav');" id="tb">
                   <tr><td><a href="" onmouseover="onMover('sprav');" >Справочники</a></td></tr>
                   <tr><td > 
                     <div id="sprav" style="width: 100%" class="diver">
                       <a href="">1</a>
                       <a href="">2</a>
                       <a href="">3</a>
                    </div>                 
                   </td></tr>
               </table>
</body>
</html>

Если есть возможность, пользуйтесь методом hover() из jQuery.

Автор: Yagmort 16.1.2011, 00:28

А можно спросить, что таким способом мы проверяем ? Так то все работает отлично спасибо...

Код



  if (!e) e = event;
       var relTgt = e.relatedTarget || e.toElement;
       while (relTgt) {
           if (relTgt.id == "tb") {return;} else {relTgt = relTgt.parentNode;}
       }

Автор: Amphiluke 16.1.2011, 00:32

Цитата(Yagmort @ 16.1.2011, 03:28

)

А можно спросить, что таким способом мы проверяем ?

Проверяем, куда переместился указатель мыши. Если это дочерний элемент таблицы, значит, не убираем меню, а если указатель вышел за пределы таблицы, то убираем. Имейте в виду, что событие mouseout срабатывает даже если указатель смещается на какой-то дочерний элемент.

Автор: Yagmort 16.1.2011, 00:42

Цитата(Amphiluke @ 16.1.2011, 00:32)

Цитата(Yagmort @ 16.1.2011, 03:28

)

А можно спросить, что таким способом мы проверяем ?

В принцепе на 70 % код понятен. Благодарю.