مشاكل مع mouseout الحدث

Question

أنا باستخدام جافا سكريبت لإخفاء صورة تظهر بعض النص الذي يكون مخفيا تحت ذلك.ولكن عندما يتم عرض النص إذا كنت انتقل أكثر من ذلك ، فإنه حرائق mouseout الحدث على الحاوية ، ثم يخفي النص و يظهر في الصورة مرة أخرى و هذا يدخل في غريب الحلقة.

Html تبدو مثل هذا:

<div onmouseover="jsHoverIn('1')"
     onmouseout="jsHoverOut('1')">
    <div id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

و جافا سكريبت (ويستخدم scriptaculous):

function jsHoverIn(id) {
  if(!visible[id]) {
    new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
    visible[id] = true;
  }
}
function jsHoverOut (id) {
  var scope = Effect.Queues.get(id);
  scope.each(function(effect) { effect.cancel(); });

  new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
  new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
  visible[id] = false;
}

هذا يبدو حقا بسيطة ولكن أنا فقط غير قادر على التفاف رأسي من حوله.

Answer 1

كنت أعطي شعبة الحاوية:

position: relative;

وإضافة الثالثة شعبة في وعاء (يجب أن يكون آخر طفل من الحاوية) مع:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

وقبض على تمرير الماوس و mouseout الأحداث على هذه div بدلا من ذلك.

لأنه لا يوجد لديه عناصر الطفل ، يجب أن لا تحصل على زائفة تمرير الماوس و mouseout الأحداث نشر إلى ذلك.

تحرير:

ما أعتقد أنه يحدث هو أنه عندما يتحرك المؤشر من أحد الوالدين عنصر على عنصر ، mouseout الحدث على العنصر الأصلي ، تمرير الماوس الحدث على عنصر الطفل.ومع ذلك ، إذا تم تمرير الماوس معالج على عنصر الطفل لا يصاب الحدث توقف نشر العنصر الأصل سوف تتلقى أيضا تمرير الماوس الحدث.

Answer 2

يبدو أن ما كنت تريد حقا هو mouseenter/mouseleave (أي الملكية الأحداث ، ولكن من السهل مضاهاة):

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

بدلا من ذلك ، التصحيح prototype.js واستخدام mouseenter و mouseleave مع الثقة.علما بأنني قد توسعت التحقق من ترك النافذة أو الدخول XUL كروم ؛ هذا يبدو لإصلاح بعض الحالات الحافة في فايرفوكس بالنسبة لي.

Answer 3

هذا قد لا يكون أفضل حل ولكن هل يمكن وضع عالمي متغير منطقية من شأنها أن تكون في متناول كل الأساليب التي من شأنها أن مجرد تحديد ما إذا كان الإجراء الأخير تم HoverIn أو HoverOut.هل يمكن استخدام هذا متغير منطقية لتحديد ما إذا كان يجب تشغيل التعليمات البرمجية أو لا.

if (bWasHoverIn){
   ...
}

Answer 4

لا onmouseover الحدث يكون على صورة div و onmouseout الحدث على النص div ؟

Answer 5

@ريان منطقية لا تساعد حقا, فقط يتجنب حلقة ، ولكن تمرير الماوس الحدث لا يزال أطلقت النص يحصل مخفية.

@براين كان عليه أن يكون هكذا ولكن هذا تصرف بنفس الطريقة.

Answer 6

أنا لست متأكدا مما إذا كان هذا من شأنه أن يصلح مع بقية التصميم ، ولكن ربما إذا قمت بتغيير css على النص div لذلك كان بنفس حجم صورة أو ثابت حجم الخارجي شعبة ، ثم عند تمرير الماوس الحدث, حجم الخارجي div لن يغير كثيرا ما يسبب mouseout الحدث.

فهل يعقل هذا ؟