بحاجة إلى مساعدة في أحداث JavaScript "Mouseover" و "Mouseout"
-
03-10-2019 - |
سؤال
انصح الرمز التالي:
لغة البرمجة:
<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.
لا تنتمي إلى StackOverflow