Форум PHP программистов > Вывод блока при наведении

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Вывод блока при наведении

darkcuba

8.08.2013 - 19:07

Всем доброго дня. Помогите вывести блок при наведении на ссылку.



<a href="#" id='catalog'>Каталог</a>

<div id='cat-block'>
Разделы и подразделы
</div>


<script>
var catlink = document.getElementById("catalog");
var catblock = document.getElementById("cat-block");

catlink .onmouseover = function(){catblock .style.display="block"}
catlink .onmouseout = function(){catblock .style.display="none"}

</script>

Необходимо вывести блок при наведении на ссылку, но при этом пока курсор находится в блоке catblock, надо что бы этот блок не исчезал. И что бы исчезал, когда курсор мыши находится не на ссылке И не в блоке.

Подскажите пожалуйста, как реализовывается данная схема, буду очень признателен за помощь

moskitos80

8.08.2013 - 20:04

На скорую руку:


<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <title>...</title>
    </head>
    <style>
        #cat-block {display: none;}
    </style>
<body>

    <a href="#" id="catalog">Каталог</a>
    <div id="cat-block">
        Разделы и подразделы
    </div>
                
    <script>
    var catlink     = document.getElementById("catalog"),
        catblock    = document.getElementById("cat-block");

    catlink.onmouseover = function(){
        catblock.style.display="block";
    };
    catblock.onmouseout = function(e){
        var evt = e||window.event,
            rel = evt.relatedTarget || evt.toElement;
        if (rel.id !== "catalog") {
            catblock.style.display="none";
        }
    };
    </script>
</body>
</html>

_____________
Сложное - просто. Простое сложно.

darkcuba

8.08.2013 - 20:12

Происходит такое:
При наведении на ссылку появляется блок.
При наведении на блок он исчезает.

Может я ошибся?

moskitos80

9.08.2013 - 00:59

В каком браузере такое происходит? Работать должно так: при наведении курсора на ссылку с id="catalog" блок с id="cat-block" - появляется, при уходе курсора на любой элемент, который не ссылка с id="catalog" блок с id="cat-block" - исчезает.

_____________
Сложное - просто. Простое сложно.

Быстрый ответ:

Здесь расположена полная версия этой страницы.