Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.10.2011, 15:46
Интересующийся
Отправить личное сообщение для Роман Валерьевич Посмотреть профиль Найти все сообщения от Роман Валерьевич
 
Регистрация: 19.09.2011
Сообщений: 23

dmitriymar,
Спасибо за подробное разьяснение!
Ответить с цитированием
  #12 (permalink)  
Старый 07.04.2015, 13:02
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

Рассмотрел всплывающие события подробно. Имея родительский элемент и в нём другой элемент последовательность возникновения событий следующая. 1 - элемент родителя, 2 - вложенный элемент. Out - событие onmouseOUT. Over - событие onmouseOVER.
/////////
out			1
	over		2
	over	1
out				2
out			1
	over	1
/////////

Данная последовательность событий происходит при введении курсора в дочерний элемент и выведении его от туда, при этом не выходя за пределы родительского элемента. И изначально находясь в нём.
Надеюсь это достаточно наглядно. Мне посоветовали воспользоваться stopPropagation(); не разобравшись как он работает я накрутил безумное но действенное решение.
Решение приблизительно такое.

<div id="div1" onmouseover="over1();" onmouseout="out1();setTimeout ('function forDiv1Out()',10)" >
		<div id="div2" onmouseover="over2();" onmouseout="out2();"></div>
</div>

var check = 0;
var check2 = 0;
function out1(){check= 0}
function out2(){check2= 0}
function over1(){check= 1}
function over2(){check2= 1}

function forDiv1Out(){
	if (check==0 && check2==0){
	/*codeHere*/}
};

Но это очень криворуко, так делать не стоит. Если вам нужна функция именно на вывод из родительского дива, то можно потереть функции out2() и over2(). Так же ликвидировать переменную chek2.

Последний раз редактировалось Leon-on12, 07.04.2015 в 13:14.
Ответить с цитированием
  #13 (permalink)  
Старый 31.05.2017, 12:40
Интересующийся
Отправить личное сообщение для mcreature Посмотреть профиль Найти все сообщения от mcreature
 
Регистрация: 24.05.2014
Сообщений: 12

Всем привет!

Тут такое дело, в инете пишут, что mouseenter не учитывает переходы внутри элементов. Но вот у меня почему-то учитывает. Что я могу не правильно делать?

Код самый простой, но работает не как нужно..
$('.mini-basket').on('mouseenter',function() {
		$('.mini-basket-layer').css('visibility', 'visible');
	});

	$('.mini-basket').on('mouseleave',function() {
		$('.mini-basket-layer').css('visibility', 'hidden');
	});
Ответить с цитированием
  #14 (permalink)  
Старый 31.05.2017, 13:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от mcreature
Код самый простой, но работает не как нужно..
Ты пример делай полный, а не огрызок JSа...
Ответить с цитированием
  #15 (permalink)  
Старый 31.05.2017, 13:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

все работает как часы =)
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
</head>
<body>
<div class="mini-basket" style="display:inline-block; width: 100px; height: 100px; border: 1px solid grey;"></div>
<div class="mini-basket-layer" style="display: inline-block; width: 100px; height: 100px; border: 1px solid grey;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$('.mini-basket').on('mouseenter',function() {
		$('.mini-basket-layer').css('visibility', 'visible');
	});
	$('.mini-basket').on('mouseleave',function() {
		$('.mini-basket-layer').css('visibility', 'hidden');
	});	
		</script>
	</body>
	</html>
Ответить с цитированием
  #16 (permalink)  
Старый 31.05.2017, 16:05
Интересующийся
Отправить личное сообщение для mcreature Посмотреть профиль Найти все сообщения от mcreature
 
Регистрация: 24.05.2014
Сообщений: 12

Сообщение от j0hnik
все работает как часы =)
Как я написал в вопросе, проблема в том, что внутри mini-basket есть еще элементы. mouseenter по идее не должен их учитывать, а он их учитывает и если попадает на внутренний элемент, срабатывает mouseleave.

Ребята, извиняюсь, думал проблема в mouseleave, а проблема оказалась в другом.

Может тогда кто знает, возможно ли сделать так, т.к. мне кажется, что невозможно:
Есть элемент, при наведении на него должен появиться выпадающий блок и layer под ним.
И, соответственно, когда уводишь мышь с этого элемента layer и блок должны исчезнуть.
Собственно проблема в layer, как только он появляется hover и mouseenter спадают.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="site">
        <header id="header">
            <div class="mini-basket" style="width: 100px; height: 100px; border: 1px solid grey;"></div>
        </header>
    </div>
    <div class="layer" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.2); visibility: hidden;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('.mini-basket').on('mouseenter',function() {
        $('.layer').css('visibility', 'visible');
    });
    $('.mini-basket').on('mouseleave',function() {
        $('.layer').css('visibility', 'hidden');
    });
</script>
</body>
</html>

Последний раз редактировалось ksa, 31.05.2017 в 16:50. Причина: Сделал запуск скрипта...
Ответить с цитированием
  #17 (permalink)  
Старый 31.05.2017, 16:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

mcreature, где твой пример?
Пока только рассказы...
Ответить с цитированием
  #18 (permalink)  
Старый 31.05.2017, 16:45
Интересующийся
Отправить личное сообщение для mcreature Посмотреть профиль Найти все сообщения от mcreature
 
Регистрация: 24.05.2014
Сообщений: 12

Сообщение от ksa
mcreature, где твой пример?
Пока только рассказы...
Исправил сообщение выше, там пример.
Ответить с цитированием
  #19 (permalink)  
Старый 31.05.2017, 16:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от mcreature
Исправил сообщение выше, там пример.
У j0hnik пример понятен, а твой чего-то нет.

Что ты ожидаешь получить в своем примере? И чего не получаешь?
Ответить с цитированием
  #20 (permalink)  
Старый 31.05.2017, 16:57
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

z-index: -1 и все заиграет!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск