Нужна помощь с JavaScript «Mouseover» и «Mouseout» событий
-
03-10-2019 - |
Вопрос
Рассмотреть возможность следующий код:
HTML:
<div class='a'></div>
<div class='b'></div>
CSS:
body {
position: relative;
}
.a {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: #777;
}
.b {
position: absolute;
display: none;
background: red;
}
JavaScript:
$(function() {
$('.a').live('mouseover mouseout', function(e) {
switch (e.type) {
case 'mouseover': {
$('.b').offset({'left': $(this).offset().left,
'top': $(this).offset().top})
.width($(this).outerWidth())
.height($(this).outerHeight())
.show();
break;
}
case 'mouseout': {
$('.b').hide();
break;
}
}
});
});
Как вы видете здесь, какой-то происходит мерцание, потому что когда .b
Показано, mouseout
автоматически происходит. Как бы вы решили эту проблему?
Желаемое поведение: когда мышь закончится .a
, .b
должно быть показано (должно покрыть .a
), а когда мышь не закончится .a
, .b
не должно быть показано. .a
всегда должно быть показано.
Положение и размеры .a
не является постоянным (должен быть рассчитан на лету).
Решение
Я придумал Это решение:
$(function() {
$('.a').live('mouseover', function(e) {
$('.b').offset({'left': $(this).offset().left,
'top': $(this).offset().top})
.width($(this).outerWidth())
.height($(this).outerHeight())
.show();
});
$('.b').live('mouseout', function(e) {
$(this).hide();
});
});
Другие советы
Пытаться
$(function() {
$('.a').live('mouseover', function(e) {
$('.b').offset({'left': $(this).offset().left,
'top': $(this).offset().top})
.width($(this).outerWidth())
.height($(this).outerHeight())
.show();
});
$('.b').live('mouseout', function(e) {
$('.b').hide();
break;
});
});
Это должно означать, что когда пользователь перемещает их на мышь на область A, площадь B отображается, а затем, когда они перемещают их мышку из территории B, область A Reshown.
Не связан с StackOverflow