dmitriymar,
Спасибо за подробное разьяснение! |
Рассмотрел всплывающие события подробно. Имея родительский элемент и в нём другой элемент последовательность возникновения событий следующая. 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. |
Всем привет!
Тут такое дело, в инете пишут, что mouseenter не учитывает переходы внутри элементов. Но вот у меня почему-то учитывает. Что я могу не правильно делать? Код самый простой, но работает не как нужно..
$('.mini-basket').on('mouseenter',function() {
$('.mini-basket-layer').css('visibility', 'visible');
});
$('.mini-basket').on('mouseleave',function() {
$('.mini-basket-layer').css('visibility', 'hidden');
});
|
Цитата:
|
все работает как часы =)
<!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>
|
Цитата:
Ребята, извиняюсь, думал проблема в 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>
|
mcreature, где твой пример?
Пока только рассказы... :D |
Цитата:
|
Цитата:
Что ты ожидаешь получить в своем примере? И чего не получаешь? |
z-index: -1 и все заиграет!
|
| Часовой пояс GMT +3, время: 14:18. |