มีวิธีที่ง่ายและรวดเร็วในการทำ jQuery ที่ฉันพลาดหรือไม่?

ฉันไม่ต้องการใช้เหตุการณ์ mouseover เพราะฉันได้ใช้เพื่อสิ่งอื่นแล้ว ฉันแค่ต้องรู้ว่าเมาส์อยู่เหนือองค์ประกอบในช่วงเวลาที่กำหนดหรือไม่

ฉันต้องการทำอะไรเช่นนี้ถ้ามีฟังก์ชัน "IsMouseOver" เท่านั้น:

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}

ตั้งค่าการหมดเวลาบน mouseout เป็น fadeout และเก็บค่าส่งคืนไปยังข้อมูลในวัตถุ จากนั้นให้เปิดใช้งานยกเลิกการหมดเวลาหากมีค่าในข้อมูล

ลบข้อมูลในการติดต่อกลับของเฟดเดอร์

จริง ๆ แล้วมันแพงน้อยกว่าการใช้ mouseenter / mouseleave เพราะพวกเขาไม่ได้ไฟสำหรับเมนูเมื่อเด็ก mouseover / mouseout ยิง

รหัสนี้แสดงให้เห็นถึงสิ่งที่แฮปปี้ไทม์แฮร์รี่และฉันพยายามจะพูด เมื่อเมาส์เข้าสู่คำแนะนำเครื่องมือจะปรากฏขึ้นเมื่อเมาส์ปล่อยให้มันตั้งค่าการหน่วงเวลาให้มันหายไป หากเมาส์เข้าสู่องค์ประกอบเดียวกันก่อนที่จะเกิดการหน่วงเวลาเราจะทำลายทริกเกอร์ก่อนที่มันจะดับโดยใช้ข้อมูลที่เราเก็บไว้ก่อนหน้า

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});

ตรวจสอบโฮเวอร์ที่สะอาดและสง่างาม:

if ($('#element:hover').length != 0) {
    // do something ;)
}

คำเตือน: is(':hover')เลิกใช้แล้วใน jquery 1.8+ ดูโพสต์นี้สำหรับการแก้ปัญหา

นอกจากนี้คุณยังสามารถใช้คำตอบนี้: https://stackoverflow.com/a/6035278/8843เพื่อทดสอบว่าเมาส์วางองค์ประกอบไว้หรือไม่:

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

คุณสามารถใช้hoverเหตุการณ์ของ jQuery เพื่อติดตามด้วยตนเอง:

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

ฉันต้องการบางสิ่งตรงตามนี้ (ในสภาพแวดล้อมที่ซับซ้อนกว่าเล็กน้อยและวิธีแก้ปัญหาด้วย 'mouseenters' และ 'mouseleaves' ไม่ทำงานอย่างถูกต้อง) ดังนั้นฉันจึงสร้าง jquery plugin เล็ก ๆ น้อย ๆ ที่เพิ่มวิธี ismouseover มันใช้งานได้ค่อนข้างดี

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

จากนั้นในสถานที่ใด ๆ ของเอกสารที่คุณเรียกมันว่าสิ่งนี้และมันจะส่งกลับจริงหรือเท็จ:

$("#player").ismouseover()

ฉันทดสอบบน IE7 +, Chrome 1+ และ Firefox 4 และทำงานอย่างถูกต้อง

ใน jQuery คุณสามารถใช้. is (': hover') ได้

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

ตอนนี้จะเป็นวิธีที่รัดกุมที่สุดในการจัดหาฟังก์ชันที่ร้องขอใน OP

หมายเหตุ: ข้างต้นไม่ทำงานใน IE8 หรือต่ำกว่า

เป็นทางเลือกที่สั้นกว่าที่ทำงานใน IE8 (ถ้าฉันสามารถเชื่อถือ IE8 modus ของ IE9) และทำได้โดยไม่ทริกเกอร์$(...).hover(...)ทุกที่และไม่จำเป็นต้องรู้จักตัวเลือกสำหรับองค์ประกอบ (ในกรณีที่คำตอบของ Ivo ง่ายกว่า):

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

ผมเอาความคิด SLaks และห่อไว้ในชั้นเรียนขนาดเล็ก

function HoverWatcher(selector){
  this.hovering = false;
  var self = this; 

  this.isHoveringOver = function() { 
    return self.hovering; 
  } 

    $(selector).hover(function() { 
      self.hovering = true; 
    }, function() { 
      self.hovering = false; 
    }) 
} 

var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');



$('#container').click(function() {
  alert("box1.hover = " + box1Watcher.isHoveringOver() +
        ", box2.hover = " + box2Watcher.isHoveringOver());
});

เพียงแค่ FYI สำหรับผู้ค้นหาในอนาคตของสิ่งนี้

ฉันสร้างปลั๊กอิน jQuery ที่สามารถทำได้และอื่น ๆ อีกมากมาย ในปลั๊กอินของฉันในการรับองค์ประกอบทั้งหมดเคอร์เซอร์จะถูกโฮเวอร์เหนือกว่าเพียงทำดังนี้:

$.cursor("isHover"); // will return jQ object of all elements the cursor is 
                     // currently over & doesn't require timer

อย่างที่ฉันได้พูดไปมันมีประโยชน์มากมายอย่างที่คุณเห็นใน

jsFiddle พบที่นี่

ในขณะที่ฉันไม่สามารถแสดงความคิดเห็นดังนั้นฉันจะเขียนเป็นคำตอบ!

โปรดเข้าใจความแตกต่างระหว่างตัวเลือก css ": hover" และเหตุการณ์ hover!

": hover" เป็นตัวเลือก css และแน่นอนถูกลบออกเมื่อใช้เหตุการณ์เช่นนี้$("#elementId").is(":hover")แต่ในความหมายมันไม่มีอะไรเกี่ยวข้องกับการเลื่อนเหตุการณ์ jQuery

หากคุณโค้ด$("#elementId:hover")องค์ประกอบจะถูกเลือกก็ต่อเมื่อคุณวางเมาส์ไว้ ข้อความข้างต้นจะทำงานกับ jQuery ทุกเวอร์ชันโดยการเลือกองค์ประกอบนี้ด้วยการเลือก css ที่แท้จริงและถูกต้อง

ในทางกลับกันโฮเวอร์ของเหตุการณ์คือ

$("#elementId").hover(
     function() { 
         doSomething(); 
     }
); 

ถูกคิดค่าเสื่อมราคาเป็น jQuery 1.8 ที่นี่เป็นสถานะจากเว็บไซต์ jQuery:

เมื่อใช้ชื่อเหตุการณ์ "hover" ระบบย่อยของเหตุการณ์จะแปลงเป็น "mouseenter mouseleave" ในสตริงเหตุการณ์ สิ่งนี้น่ารำคาญด้วยเหตุผลหลายประการ:

ซีแมนทิกส์: โฮเวอร์ไม่เหมือนกับเมาส์ที่เข้าและออกจากองค์ประกอบมันหมายถึงการชะลอความเร็วหรือความล่าช้าก่อนยิง ชื่อเหตุการณ์: event.type ที่ส่งคืนโดยตัวจัดการที่แนบมานั้นไม่ได้โฮเวอร์ แต่เป็น mouseenter หรือ mouseleave ไม่มีเหตุการณ์อื่นที่จะทำเช่นนี้ การเลือกชื่อ "โฮเวอร์" ร่วมกัน: ไม่สามารถแนบกิจกรรมที่มีชื่อ "โฮเวอร์" และใช้งานโดยใช้. trigger ("โฮเวอร์") เอกสารเรียกชื่อนี้ว่า "ท้ออย่างยิ่งสำหรับรหัสใหม่" แล้วฉันต้องการคัดค้านอย่างเป็นทางการสำหรับ 1.8 และในที่สุดก็ลบออก

ทำไมพวกเขาลบการใช้งานคือ (": โฮเวอร์") ไม่ชัดเจน แต่โอ้ดีคุณยังสามารถใช้งานได้เหมือนด้านบนและนี่คือแฮ็คเล็ก ๆ

(function ($) {
   /** 
    * :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover") 
    * but using it in this way it works as :hover is css selector! 
    *
    **/
    $.fn.isMouseOver = function() {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);

โอ้และฉันจะไม่แนะนำรุ่นการหมดเวลาเนื่องจากสิ่งนี้ทำให้เกิดความซับซ้อนมากใช้ฟังก์ชันการหมดเวลาสำหรับสิ่งประเภทนี้หากไม่มีวิธีอื่นและเชื่อฉันใน95% เปอร์เซ็นต์ของทุกกรณีมีวิธีอื่น !

หวังว่าฉันจะช่วยคนสองสามคนที่นั่น

Greetz Andy

ขอบคุณทั้งคู่ ในบางจุดฉันต้องยอมแพ้ต่อการพยายามตรวจสอบว่าเมาส์ยังคงอยู่เหนือองค์ประกอบหรือไม่ ฉันรู้ว่าเป็นไปได้ แต่อาจต้องใช้รหัสมากเกินไปในการทำให้สำเร็จ

ฉันใช้เวลาสักครู่ แต่ฉันก็ทำตามคำแนะนำของคุณทั้งสองและหาสิ่งที่เหมาะกับฉัน

นี่คือตัวอย่างที่เรียบง่าย (แต่ใช้งานได้):

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

และเพื่อให้งานนี้กับข้อความบางส่วนนี่คือทั้งหมดที่ฉันต้องทำ:

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

นอกเหนือจาก CSS แฟนซีที่มีอยู่มากมายแล้วสิ่งนี้ยังช่วยให้คำแนะนำเครื่องมือเม้าส์สวย ๆ โดยวิธีการที่ฉันต้องการล่าช้าในการ mouseout เพราะช่องว่างเล็ก ๆ ระหว่างช่องทำเครื่องหมายและข้อความที่ทำให้แฟลชในขณะที่คุณเลื่อนเมาส์ข้าม แต่มันใช้งานได้เหมือนมีเสน่ห์ ฉันยังทำสิ่งที่คล้ายกันสำหรับเหตุการณ์โฟกัส / เบลอ

ฉันเห็นการหมดเวลาใช้สำหรับสิ่งนี้มาก แต่ในบริบทของเหตุการณ์คุณไม่สามารถดูพิกัดเช่นนี้ได้หรือไม่:

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

ขึ้นอยู่กับบริบทคุณอาจต้องตรวจสอบให้แน่ใจ (== e.target นี้) ก่อนการโทรคือ XYInside (e)

fyi - ฉันกำลังมองหาที่ใช้วิธีการนี้ภายในตัวจัดการ dragLeave เพื่อยืนยันว่าเหตุการณ์ dragLeave ไม่ได้ถูกกระตุ้นโดยเข้าไปในองค์ประกอบย่อย หากคุณไม่ได้ตรวจสอบว่าคุณยังคงอยู่ในองค์ประกอบหลักคุณอาจดำเนินการที่ผิดพลาดซึ่งมีความหมายเฉพาะเมื่อคุณออกจากผู้ปกครองอย่างแท้จริง

แก้ไข: นี่เป็นความคิดที่ดี แต่ทำงานไม่สม่ำเสมอ อาจมีการปรับแต่งเล็กน้อย

คุณสามารถทดสอบด้วยได้jQueryถ้า div ลูกมีคลาสที่แน่นอน จากนั้นใช้คลาสนั้นเมื่อคุณเลื่อนเมาส์ไปข้างหน้าและออกจาก div บางอันคุณสามารถทดสอบได้ว่าเมาส์ของคุณอยู่เหนือระดับนั้นหรือไม่แม้ว่าคุณจะวางเมาส์บนองค์ประกอบที่แตกต่างกันในหน้า ฉันใช้สิ่งนี้เพราะฉันมีช่องว่างระหว่าง div ในป๊อปอัปและฉันต้องการปิดป๊อปอัปเมื่อฉันย้ายออกจากป๊อปอัปไม่ใช่เมื่อฉันเลื่อนเมาส์ไปเหนือช่องว่างในป๊อปอัป ดังนั้นฉันจึงเรียกใช้ฟังก์ชันการวางเมาส์บน div เนื้อหา (ซึ่งป๊อปอัพจบลง) แต่มันจะเปิดใช้งานฟังก์ชั่นปิดเฉพาะเมื่อฉันวางเมาส์เหนือ div เนื้อหาและอยู่นอกป๊อปอัป!

$ ( "ป๊อปอัพ"). การวางเมาส์ (ฟังก์ชั่น (จ)
    {
    $ (นี้) .addClass ( "มากกว่า");
    });

$ ( "ป๊อปอัพ"). mouseout (ฟังก์ชั่น (จ)
    {
    $ (นี้) .removeClass ( "มากกว่า");
    });


$ ( "# ว่างใน"). การวางเมาส์ (ฟังก์ชั่น (จ) {
            if (! $ (". Expand"). hasClass ("over")) {
            Drupal.dhtmlMenu.toggleMenu ($ () "ขยาย.");
        }
    });

นี่จะเป็นวิธีที่ง่ายที่สุดในการทำมัน!

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

ต่อไปนี้เป็นเทคนิคที่ไม่พึ่งพา jQuery และใช้ DOM พื้นเมืองAPImatches มันใช้คำนำหน้าผู้ขายเพื่อสนับสนุนเบราว์เซอร์จะกลับไปที่ IE9 ดูmatchesselector บน caniuse.comสำหรับรายละเอียดทั้งหมด

ขั้นแรกให้สร้างฟังก์ชั่น matchSelector เช่น:

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

จากนั้นเพื่อตรวจหาโฮเวอร์:

var mouseIsOver = matchesSelector(element, ':hover');

ฉันได้ตอบคำถามนี้ด้วยคำถามอื่นโดยมีรายละเอียดทั้งหมดที่คุณอาจต้องการ:

ตรวจสอบหากวางเมาส์เหนือองค์ประกอบด้วย jQuery (มี 99 upvotes ณ เวลาที่เขียน)

โดยทั่วไปคุณสามารถทำสิ่งที่ชอบ:

var ishovered = oi.is(":hover");

ใช้ได้เฉพาะในกรณีที่oiเป็นวัตถุ jQuery ที่มีองค์ประกอบเดียว หากมีหลายองค์ประกอบที่ตรงกันคุณต้องใช้กับแต่ละองค์ประกอบตัวอย่างเช่น:

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

นี่คือการทดสอบเริ่มต้น jQuery 1.7

นี่คือฟังก์ชั่นที่ช่วยให้คุณตรวจสอบว่าเมาส์อยู่ในองค์ประกอบหรือไม่ สิ่งเดียวที่คุณควรทำคือเรียกใช้ฟังก์ชันที่คุณสามารถใช้ EventObject ที่เกี่ยวข้องกับเมาส์ได้ บางสิ่งเช่นนี้

$("body").mousemove(function(event){
     element_mouse_is_inside($("#mycontainer", event, true, {});
});

คุณสามารถดูซอร์สโค้ดได้ที่นี่ใน GitHub หรือที่ด้านล่างของโพสต์:

https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js

function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
    if(!with_margin)
    {
        with_margin = false;
    }
    if(typeof offset_object !== 'object')
    {
        offset_object = {};
    }
    var elm_offset = elementToBeChecked.offset();
    var element_width = elementToBeChecked.width();
    element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
    element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
    var element_height = elementToBeChecked.height();
    element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
    element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
    if( with_margin)
    {
        element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
    }

    elm_offset.rightBorder = elm_offset.left+element_width;
    elm_offset.bottomBorder = elm_offset.top+element_height;

    if(offset_object.hasOwnProperty("top"))
    {
        elm_offset.top += parseInt(offset_object.top);
    }
    if(offset_object.hasOwnProperty("left"))
    {
        elm_offset.left += parseInt(offset_object.left);
    }
    if(offset_object.hasOwnProperty("bottom"))
    {
        elm_offset.bottomBorder += parseInt(offset_object.bottom);
    }
    if(offset_object.hasOwnProperty("right"))
    {
        elm_offset.rightBorder += parseInt(offset_object.right);
    }
    var mouseX = mouseEvent.pageX;
    var mouseY = mouseEvent.pageY;

    if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
        && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
    {
        return true;
    }
    else
    {
        return false;
    }
}

เมื่อพูดถึงสิ่งที่ 'แฮปปี้ไทม์แฮร์รี่' กล่าวให้แน่ใจว่าใช้ฟังก์ชั่น jQuery .data () เพื่อเก็บรหัสไทม์เอาต์ นี่คือเพื่อให้คุณสามารถเรียกคืนรหัสการหมดเวลาได้อย่างง่ายดายเมื่อ 'mouseenter' ถูกเรียกใช้ในองค์ประกอบเดียวกันนั้นในภายหลังช่วยให้คุณกำจัดทริกเกอร์สำหรับเคล็ดลับเครื่องมือของคุณจะหายไป

คุณสามารถใช้งาน mouseenter และ mouseleave ของเม้าส์ คุณสามารถตั้งค่าสถานะเมื่อเมาส์เข้าสู่พื้นที่ที่ต้องการและยกเลิกการตั้งค่าสถานะเมื่อมันออกจากพื้นที่

ฉันรวมแนวคิดจากหัวข้อนี้และเกิดขึ้นกับสิ่งนี้ซึ่งมีประโยชน์สำหรับการแสดง / ซ่อนเมนูย่อย:

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

ดูเหมือนว่าจะทำงานให้ฉัน หวังว่านี่จะช่วยใครซักคน

แก้ไข: ตอนนี้ตระหนักถึงวิธีการนี้ไม่ทำงานอย่างถูกต้องใน IE

ฉันไม่สามารถใช้คำแนะนำใด ๆ ข้างต้น
ทำไมฉันถึงชอบโซลูชันของฉัน
วิธีการนี้จะตรวจสอบว่าเมาส์อยู่เหนือองค์ประกอบเมื่อใดก็ตามที่คุณเลือก
Mouseenterและ: hoverนั้นเจ๋ง แต่ mouseenter จะเรียกใช้เฉพาะเมื่อคุณเลื่อนเมาส์ไม่ใช่เมื่อองค์ประกอบเคลื่อนที่ภายใต้เมาส์
: โฮเวอร์ค่อนข้างหวาน แต่ ... IE

ดังนั้นฉันทำสิ่งนี้:

ไม่ 1.เก็บเมาส์ x, ตำแหน่ง y ทุกครั้งที่ย้ายเมื่อคุณต้องการ,
ไม่ 2.ตรวจสอบว่าเมาส์อยู่เหนือองค์ประกอบใด ๆ ที่ตรงกับคำสั่งหรือไม่ ... เช่นเรียกเหตุการณ์เมาส์

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

ทราบเพียงเกี่ยวกับคำตอบที่ได้รับความนิยมและเป็นประโยชน์ของ Arthur Goldsmith ด้านบน: หากคุณเลื่อนเมาส์จากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่งใน IE (อย่างน้อยก็จนกว่า IE 9) คุณอาจมีปัญหาในการทำงานอย่างถูกต้องหากองค์ประกอบใหม่มี พื้นหลังโปร่งใส (ซึ่งโดยค่าเริ่มต้น) วิธีแก้ปัญหาของฉันคือการให้องค์ประกอบใหม่เป็นภาพพื้นหลังโปร่งใส

$(document).hover(function(e) {
    alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});

ซอ

คุณสามารถใช้is(':visible');jquery และสำหรับ $ ('. item: hover') มันยังทำงานใน Jquery ด้วย

นี่คือรหัส htm snnipet:

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

และนี่คือรหัส JS:

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

นี่คือสิ่งที่ฉันพูดถึง :)