Определение области срабатывания события мышки относительно контейнера и его содержимого

@vv-b · Регистрация: 12.02.2014

Студворк — интернет-сервис помощи студентам

Есть код, из него следует, как видите, что при наведении на "background" показывать "block", но "block" у меня зашит внутрь "background" и получается, что табличка всплывает в любом случае при наведении на общий блок, помогите, как сделать, чтобы блок "block" показывался только в пределах наведения на "background"

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript"> 
$(document).ready(function() { 
$('div.block').css("opacity", "0"); 
$('div.background').hover(function() { 
$('div.block', this).stop().fadeTo("normal", .97);},
function() { 
$('div.block', this).stop().fadeTo("normal", .0); 
}); 
}); 
</script>

HTML5
1
2
3
4
5
6
7
8
9
<div class="background" style="position: absolute;z-index: 3;top: 199px;left: 49px;width: 82px;height: 22px;">
<div class="block" style="left: 25px; top: 61px; height: 176px; width: 376px; z-index: 4; display: block; opacity: 0; background: white;">
<p style="height: 37px; background: #efefef;font-size: 18px; color: #68a442; padding-top: 14px;padding-left: 29px;">Название</p>
<p style="padding-left: 29px;font-size: 19px; font-weight: bold; text-transform: uppercase;padding-top: 10px;">Имя</p>
<p style="padding-left: 29px;color: #979797;font-style: italic;font-size: 14px;padding-top: 7px;">Фамилия</p>
<p style="padding-left: 29px;font-size: 19px; font-weight: bold;padding-top: 10px;">Телефон</p>
<p style="padding-left: 29px;font-style: italic;font-size: 14px;padding-top: 7px;"><a href="mailto:test@test.ru">почта</a></p>
</div>
</div>

@amadey18 · 12.03.2015, 09:42

Элемент "block" является дочерним от элемента "background", так что он в любом случае будет вызывать событие .hover() элемента "background".
Пусть исправят меня профессионалы, если я что-то не так сказал.
Т.е. вам необходимо вытащить "block" за пределы "background".
Вот ваш код:
http://jsfiddle.net/amadey18/abvebcrh/

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="background" style="position: absolute;z-index: 3;top: 199px;left: 49px;width: 82px;height: 22px;">
<div class="block" style="left: 25px; top: 61px; height: 176px; width: 376px; z-index: 4; display: block; opacity: 0; background: white;">
<p style="height: 37px; background: #efefef;font-size: 18px; color: #68a442; padding-top: 14px;padding-left: 29px;">Название</p>
 
    <p style="padding-left: 29px;font-size: 19px; font-weight: bold; text-transform: uppercase;padding-top: 10px;">Имя</p>
<p style="padding-left: 29px;color: #979797;font-style: italic;font-size: 14px;padding-top: 7px;">Фамилия</p>
<p style="padding-left: 29px;font-size: 19px; font-weight: bold;padding-top: 10px;">Телефон</p>
<p style="padding-left: 29px;font-style: italic;font-size: 14px;padding-top: 7px;"><a href="mailto:test@test.ru">почта</a></p>
</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function() {
$('div.block').css("opacity", "0");
$('div.background').hover(function() {
$('div.block', this).stop().fadeTo("normal", .97);},
function() {
$('div.block', this).stop().fadeTo("normal", .0);
});
});

А вот так оно должно работать, судя по вашим требованиям:
http://jsfiddle.net/amadey18/abvebcrh/1/

HTML5
1
2
3
4
5
6
7
8
9
<div class="background" style="position: absolute;z-index: 3;top: 199px;left: 49px;width: 82px;height: 22px;">
</div>
<div class="block" style="left: 25px; top: 61px; height: 176px; width: 376px; z-index: 4; display: block; opacity: 0; background: white;">
<p style="height: 37px; background: #efefef;font-size: 18px; color: #68a442; padding-top: 14px;padding-left: 29px;">Название</p>
 
    <p style="padding-left: 29px;font-size: 19px; font-weight: bold; text-transform: uppercase;padding-top: 10px;">Имя</p>
<p style="padding-left: 29px;color: #979797;font-style: italic;font-size: 14px;padding-top: 7px;">Фамилия</p>
<p style="padding-left: 29px;font-size: 19px; font-weight: bold;padding-top: 10px;">Телефон</p>
<p style="padding-left: 29px;font-style: italic;font-size: 14px;padding-top: 7px;"><a href="mailto:test@

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
$('div.block').css("opacity", "0");
$('div.background').hover(function() {
    console.log(1);
$('div.block').stop().fadeTo("normal", .97);},
function() {
$('div.block').stop().fadeTo("normal", .0);
});
});

со стилями разве что поработать, но не думаю что это большая проблема.

@nrobert · 12.03.2015, 10:09

На самом деле можно инициировать событие только на родитель. См пример.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="background" style="background:red;margin:40px;padding:40px;height:176px;">
    <div class="block" style="left: 25px; top: 61px; width: 376px; z-index: 4; display: block; background: yellow;">
        <p style="height: 37px; background: #efefef;font-size: 18px; color: #68a442; padding-top: 14px;padding-left: 29px;">Название</p>
        <p style="padding-left: 29px;font-size: 19px; font-weight: bold; text-transform: uppercase;padding-top: 10px;">Имя</p>
        <p style="padding-left: 29px;color: #979797;font-style: italic;font-size: 14px;padding-top: 7px;">Фамилия</p>
        <p style="padding-left: 29px;font-size: 19px; font-weight: bold;padding-top: 10px;">Телефон</p>
        <p style="padding-left: 29px;font-style: italic;font-size: 14px;padding-top: 7px;">
            <a href="mailto:test@test.ru">почта</a>
        </p>
    </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function() {
    $('div.block').css("opacity", "0"); 
    $('div.background').mouseover(function(e){
        if(e.target===this){
            $('div.block').fadeTo("normal",.97);
        }
    }).mouseleave(function(){
        $('div.block').fadeTo("normal",.0);
    });
});

@amadey18 · 12.03.2015, 10:23

nrobert, да, это в разы лучше.

@vv-b · 12.03.2015, 10:59 **[ТС]**

Но ведь в данном случае получается, что работает совсем по-другому принципу.
Пока что поставил такой принцип, но все равно криво получается( Не могу добиться нужного, дочерний блок получается активным при наведении на него, а не хотелось бы

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 
                $(document).ready(function() { /*отработать как только загрузилась вся страница*/
                    $('.metka_area').hover( /*при наведении на метку*/
                        function() { 
                            $(this).find(".block_tooltip").stop().fadeTo("normal", .8); /*плавно сделать блок непрозрачным*/
                        },
                        function() { 
                            $(this).find(".block_tooltip").stop().fadeTo("normal", .0); /*плавно сделать блок прозрачным как только отвели курсор*/
                        }); 
                }); 
            </script>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
                .map_holder{
                    background-image: url('/bitrix/templates/ec-line-2015/files/temp4.png');
                    width: 658px;
                    height: 907px;
                    position: relative;
                }
                .block_tooltip{ /*эти размеры не меняются, самой всплывашки*/
                    opacity: 0;
                    background: white;
                    height: 149px;
                    width: 270px;
                }
 
                .metka_area{ 
                    position: absolute;
                    cursor: pointer;
                }
 
                #popova{ /*пример метки 1. тут первые 2 строки положение, вторые 2 размеры*/
                    top: 320px;
                    left: 231px;
                    height: 85px;
                    width: 38px;
                }
                #popova1{ /*пример метки 2. тут первые 2 строки положение, вторые 2 размеры*/
                    top: 385px;
                    left: 254px;
                    height: 43px;
                    width: 116px;
                }
                /*вынес из стайла стили*/
                .block_tooltip .raion{
                    height: 28px; background: #efefef;font-size: 18px; color: #68a442; padding-top: 7px;padding-left: 29px;
                }
                .block_tooltip .fio{
                    padding-left: 29px;font-size: 17px; font-weight: bold; text-transform: uppercase;padding-top: 8px;
                }
                .block_tooltip .doljnost{
                    padding-left: 29px;color: #979797;font-style: italic;font-size: 14px;padding-top: 7px;
                }
                .block_tooltip .phone_tel{
                    padding-left: 29px;font-size: 17px; font-weight: bold;padding-top: 8px;
                }
                .block_tooltip .email_sotr{
                    padding-left: 29px;font-style: italic;font-size: 14px;padding-top: 7px;
                }
            </style>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="map_holder">
                <div class="metka_area" id="popova">
                    <div class="block_tooltip">
                        <p class="raion">Левобережный район</p>
                        <p class="fio">Попова Татьяна</p>
                        <p class="doljnost">Менеджер</p>
                        <p class="phone_tel">8 (495) 663-82-84 доб. 1840</p>
                        <p class="email_sotr"><a href="mailto:t.popova@ec-line.ru">t.popova@ec-line.ru</a></p>
                    </div>
                </div>
                <div class="metka_area" id="popova1">
                    <div class="block_tooltip">
                        <p class="raion">Головинский район</p>
                        <p class="fio">Попова Татьяна</p>
                        <p class="doljnost">Менеджер</p>
                        <p class="phone_tel">8 (495) 663-82-84 доб. 1840</p>
                        <p class="email_sotr"><a href="mailto:t.popova@ec-line.ru">t.popova@ec-line.ru</a></p>
                    </div>
                </div>

@nrobert · 12.03.2015, 11:32

Сообщение от vv-b

Пока что поставил такой принцип, но все равно криво получается

Где вы поставили его (этот принцип)? По сути, вы ведь ничего не меняли в JS-коде.

@vv-b · 12.03.2015, 11:41 **[ТС]**

По сути, вы ведь ничего не меняли в JS-коде.

Я имел в виду тот, который и был.
Да, ничего не поменял. Попробовал так, как вы сказали инициировать на родителя, блок не хочет появляться почему-то

Где вы поставили его (этот принцип)?

Пробую пока что на локальной машине, с интернетом беда какая-то, с телефона только доступ есть

@nrobert · 12.03.2015, 16:00

vv-b, обновил пример.

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function() {
    $('div.block').css("opacity", "0"); 
    $('div.background').mouseover(function(e){
        if(e.target===this){
            $('div.block').fadeTo("normal",.97);
        }
    }).mouseleave(function(){
        $('div.block').fadeTo("normal",.0);
    });
});

@amadey18 · 12.03.2015, 16:47

nrobert, если заходить мышкой снизу, то он не выводится, т.к. div.block мешает))

@nrobert · 12.03.2015, 17:38

Тогда нужно расчитать координаты курсора и сравнить с offset элемента. Что-то в этом роде

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
    $('div.block').css("opacity", "0"); 
    $('div.background').on('mouseover',function(e){
        var left=$(this).offset().left,
            right=left+$(this).width(),
            top=$(this).offset().top,
            bottom=top+$(this).height(),
            isIn=(e.pageX>=left && e.pageX<=right && e.pageY>=top && e.pageY<=bottom)
        ;
        if(isIn){
            $('div.block').fadeTo("normal",.97);
        }
    }).on('mouseleave',function(){
        $('div.block').fadeTo("normal",.0);
    });
});

Конечно, нужно тщательнее учитывать padding.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@amadey18 92 / 92 / 51 Регистрация: 29.04.2013 Сообщений: 361
	12.03.2015, 10:23
	nrobert, да, это в разы лучше. 0

@amadey18 92 / 92 / 51 Регистрация: 29.04.2013 Сообщений: 361
	12.03.2015, 16:47
	nrobert, если заходить мышкой снизу, то он не выводится, т.к. div.block мешает)) 0