jQuery: تبديل الفصل على Mouseover/Mouseout of Element ، ولكن الحفاظ على الفصل إذا انقر فوق العنصر؟

Question

يشتبه في أنني أحاول أن أكون ذكيًا جدًا بالنسبة لبدء مصلحتي مع هذا!

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

حاولت الخروج بما يلي:

    $.fn.showHover = function(settings) {
    this.bind('mouseover', function hoverIn(){
        if ($(this).hasClass('active') == false) {
            $(this).addClass('active');
            $(this).bind('click', function getFocus(){
              $(this).unbind('mouseout', hoverOut);
            })
            $(this).bind('mouseout', function hoverOut(){
              $(this).removeClass("active");
              $(this).unbind('click', getFocus);
            })
        }
    })
    return this;
};

... الفكرة إذا قمت بالخروج قبل النقر ، قم بإزالة الفصل وفك النقر - إذا قمت بالنقر قبل أن تحوم خارجًا ، فلا تتم إزالة الفئة ولم يتم إزالة الفصل أبدًا.

من الواضح (بما أنني أسأل هنا للحصول على المساعدة!) لا يعمل - يتم إزالة الفصل سواء أكانت داخل العنصر قبل أن أحوم أو لا.

هل يمكن لأي شخص أن يشير إلى سبب فشله ، وربما يقترح طريقة أفضل حوله؟ شكرًا!

Answer 1

إذا كان تغيير مظهر العنصر هو هدفك من خلال CSS ، فإن أحد الحلول السهل هو إضافة محدد آخر ، باسم مختلف.

.active_hover,
.active_click { ... }

ثم قم بربط الحدث Hover/Ithover لإضافة/إزالة فئة "Active_hover" ، وحدث النقر لإضافة فئة "Active_Click".

Answer 2

يمكنك القيام بذلك

$(".class").mouseenter( function(){
$(this).css("edit css"); // you can use .animate instead of .css if you want
});
$(".class").mouseleave( function(){
$(this).removeAttr('style');
});
$(".class").click( function(){
$(this).addClass("setactiveclass");
});

لذلك عندما تحوم ، يتم تعيين CSS مضمّن ، وإذا قمت بإخراج النمط المضمن الذي تم تعيينه بواسطة jQuery .. وإذا قمت بالنقر فوقه. يتم تعيين فئة صلبة عليها حتى لا تتداخل مع بعضها البعض.