VPF::Почему проподает div??? при наведении на его ссылк

Yagmort

Дата 15.1.2011, 23:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 339
Регистрация: 17.6.2009

Репутация: нет
Всего: -1

Хотел сделать ввиде выпадающего меню но не получилось. Навожу на "Справочники" выпадает "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>

Это сообщение отредактировал(а) Yagmort - 16.1.2011, 00:06

Amphiluke

Дата 16.1.2011, 00:19 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

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

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 339
Регистрация: 17.6.2009

Репутация: нет
Всего: -1

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

Код



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

Это сообщение отредактировал(а) Yagmort - 16.1.2011, 00:30

Amphiluke

Дата 16.1.2011, 00:32 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

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

)

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

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

Это сообщение отредактировал(а) Amphiluke - 16.1.2011, 00:32

Yagmort

Дата 16.1.2011, 00:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 339
Регистрация: 17.6.2009

Репутация: нет
Всего: -1

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

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

)

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

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »