jQuery - مشكلة مع Mouseover

Question

لدي السيناريو التالي...

عندما أحوم span.share-this, ، يطلق Div يسمى "تحت'أن تصل في الاعتبار. هذا الشيء يعمل بالضبط بالطريقة التي أريدها. الآن قمت بتعيينه ، أنه عندما يكون مؤشر الماوس على 'تحت' div وأنا ماوس ، 'تحت' يزول Div ويعود كل شيء كما كان (كل شيء لا يزال dandy).

مشكلتي هي أنه عندما أحوم فوق span.share-this ولا تتنقل إلى 'تحت' Div ، ولكن انتقل بعيدًا إلى جزء آخر من الصفحة ، 'تحت' Div لا يزال مرئيا.

أود أن أضعها في ذلك ، إذا كنت أتنقل من span.share-this إلى جزء آخر من الصفحة ، 'تحت' يختبئ ديف.

هل يعرف أي شخص الوظيفة التي يجب أن أنظر إليها؟

رمز jQuery

$('#slider span.share-this').mouseover(function()
{   
    $(this).parents('li').children('div.under').css('bottom', '12px');
});

$('#slider div.under').mouseout(function()
{
    $(this).css('bottom', '52px');
});

رمز HTML

<li>
    <div class="item">
        <span class="share-this">Share This</span>
    </div>
    <div class="under">
        Under
    </div>
</li>

اختبار عنوان URL: http://www.eirestudio.net/share/

Answer 1

لديك بداية جيدة. تحتاج فقط إلى إضافة عدد قليل من الفأر والماوس. باستخدام التحويم ربما يكون أسهل.

$('#slider span.share-this').hover(function()
{   
    $(this).parents('li').children('div.under').css('bottom', '12px');
}, function(){
    $(this).parents('li').children('div.under').css('bottom', '52px');
});

$('#slider div.under').hover(function()
{
    $(this).css('bottom', '12px');
},function()
{
    $(this).css('bottom', '52px');
});

اعتمادًا على احتياجاتك وإلى أي مدى ، من الناحية الأخرى ، على الصفحة ، قد ترغب أيضًا في النظر إلى العنصرين setTimeout و clearTimeout وظائف JavaScript. إذا كانت الفتنة والفرض بعيدًا بما يكفي حيث يمكن لشخص ما أن يجلس من span.share-this ولا تتفوق على div.under, ، يمكنك تعيين مهلة ، بعد عدد معين من المللي ثانية ، ستخفي div.under. ثم إذا كانوا فوق div.under كنت تم مسح المهلة. فقط بسرعة ، قد يشبه شيء من هذا القبيل:

function hideUnder(){
   $('#slider div.under').css('bottom', '52px');
}

var under;
$('#slider span.share-this').hover(function()
{   
    clearTimeout(under);
    $(this).parents('li').children('div.under').css('bottom', '12px');
}, function(){
    under = setTimeout(hideUnder, .5*1000);
});

$('#slider div.under').hover(function()
{
    clearTimeout(under);
    $(this).css('bottom', '12px');
},function()
{
    under = setTimeout(hideUnder, .5*1000);
});

بالطبع ، على الرغم من ذلك ، فإن هذا قد يتسبب في تأخير نصف ثانية قبل div.under كانت مخبأة.

Answer 2

... أعتقد أنك بحاجة إلى الاتصال .mouseout () على المشاركة-هذا div وإخفاء ما تريد إخفاءه هناك. أو فاتني شيء :-(