VPF::Бокс должен исчезать при выведении мыши из бокса

linuxoid

Дата 12.8.2010, 00:47 (ссылка)

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

Загрузка ...

Бывалый

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

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

Здравствуйте коллеги. У меня возникла одна проблемка, которую я как-то не могу прояснить.

Нужно, чтобы бокс исчезал только тогда, когда мышь выходит за рамки div-бокса. Но на деле onmouseout срабатывает уже тогда, когда мы попадаем в ul-list. Но ведь ul-list находится в div'e. Другими словами как сделать так, чтобы этот ul-list воспринимался как пространство этого бокса (в котором он находится) и чтобы в действительности бокс исчезал только при выводе курсора из пространства div'a.

Код


<!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>DIV based menu...</title>
<style>

#box {
    background-color:#0CF;
    border: 1px solid black;
    margin:10px;
    color:white;
    width:300px; 
    height:300px;
    float:left;
}

</style>

<script type="text/javascript">

function displayBox()
{
    document.getElementById("box").style.display = "";
}

function hideBox()
{    
    document.getElementById("box").style.display = "none";
}
    
</script>

</head>

<body onload="hideBox()">

<p onmouseover="displayBox();">Test text...</p>


<div id="box" onmouseout="hideBox();">
    <ul style="border:3px solid red;">
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
    </ul>
</div>


</body>
</html>

Это сообщение отредактировал(а) linuxoid - 12.8.2010, 09:29

Amphiluke

Дата 12.8.2010, 09:54 (ссылка)

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

Загрузка ...

☽

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

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

Вариант первый. Без применения библиотек.

Код


<!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>DIV based menu...</title>
<style type="text/css">

#box {
    background-color:#0CF;
    border: 1px solid black;
    margin:10px;
    color:white;
    width:300px; 
    height:300px;
    float:left;
    display: none;
}

</style>

<script type="text/javascript">
    function addHandler(obj, evnt, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evnt, handler, false);
        } else {
            obj.attachEvent("on" + evnt, handler);
        }
    }
    
    function hideBox(e) {
        var box = document.getElementById("box");
        if (e) {
            var ct = e.relatedTarget || event.toElement;
            while (ct) {
                if (ct == box) return true;
                ct = ct.parentNode;
            }
            box.style.display = "none";
        } else {
            if (!box.contains(event.toElement))
                box.style.display = "none";
        }
    }

    function displayBox(e) {
        document.getElementById("box").style.display = "block";
    }
    
    function docReady(e) {
        addHandler(document.getElementById("test"), "mouseover", displayBox);
        addHandler(document.getElementById("box"), "mouseout", hideBox);
    }
    
    addHandler(window, "load", docReady);
</script>
</head>

<body>
<p id="test">Test text...</p>

<div id="box">
    <ul style="border:3px solid red;">
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
    </ul>
</div>
</body>
</html>

Вариант второй. JQuery.

Код


<!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>DIV based menu...</title>
<style type="text/css">

#box {
    background-color:#0CF;
    border: 1px solid black;
    margin:10px;
    color:white;
    width:300px; 
    height:300px;
    float:left;
}

</style>

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#box").hide();
        $("#test").mouseover(function() {$("#box").show();});
        $("#box").hover(function() {$("#box").show();}, function() {$("#box").hide();});
    });
</script>
</head>

<body>
<p id="test">Test text...</p>

<div id="box">
    <ul style="border:3px solid red;">
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
    </ul>
</div>

</body>
</html>

Это сообщение отредактировал(а) Amphiluke - 12.8.2010, 10:03

linuxoid

Дата 12.8.2010, 13:16 (ссылка)

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

Загрузка ...

Бывалый

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

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

Благодарю Вас сеньор! smile

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