Có cách nào nhanh chóng và dễ dàng để làm điều này trong jQuery mà tôi đang thiếu không?

Tôi không muốn sử dụng sự kiện di chuột vì tôi đã sử dụng nó cho mục đích khác. Tôi chỉ cần biết nếu con chuột vượt qua một yếu tố tại một thời điểm nhất định.

Tôi muốn làm một cái gì đó như thế này, nếu chỉ có chức năng "IsMouseOver":

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

Đặt thời gian chờ trên mouseout để làm mờ dần và lưu trữ giá trị trả về dữ liệu trong đối tượng. Sau đó, onmouseover, hủy thời gian chờ nếu có giá trị trong dữ liệu.

Xóa dữ liệu trên cuộc gọi lại của fadeout.

Nó thực sự ít tốn kém hơn khi sử dụng mouseenter / mouseleave vì chúng không kích hoạt cho menu khi trẻ em di chuột / di chuột ra ngoài.

Mã này minh họa những gì harry hạnh phúc và tôi đang cố gắng nói. Khi chuột vào, một chú giải công cụ xuất hiện, khi chuột rời khỏi nó sẽ đặt độ trễ cho nó biến mất. Nếu chuột vào cùng một phần tử trước khi kích hoạt độ trễ, thì chúng ta sẽ hủy kích hoạt trước khi nó tắt bằng cách sử dụng dữ liệu chúng ta lưu trữ trước đó.

$("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); 
});

Một kiểm tra di chuột sạch sẽ và thanh lịch:

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

CẢNH BÁO: is(':hover')không được dùng trong jquery 1.8+. Xem bài đăng này cho một giải pháp.

Bạn cũng có thể sử dụng câu trả lời này: https://stackoverflow.com/a/6035278/8843 để kiểm tra xem chuột có di chuột một phần tử không:

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

Bạn có thể sử dụng hoversự kiện của jQuery để theo dõi thủ công:

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

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

Tôi cần một cái gì đó chính xác như thế này (trong một môi trường phức tạp hơn một chút và giải pháp có nhiều 'chuột và' mouseleaves 'không hoạt động chính xác) vì vậy tôi đã tạo ra một plugin jquery nhỏ có thêm phương thức này. Nó đã làm việc khá tốt cho đến nay.

//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);

Sau đó, ở bất kỳ vị trí nào của tài liệu, bạn gọi nó như thế này và nó trả về đúng hoặc sai:

$("#player").ismouseover()

Tôi đã thử nghiệm nó trên IE7 +, Chrome 1+ và Firefox 4 và đang hoạt động bình thường.

Trong jQuery bạn có thể sử dụng .is (': hover'), vì vậy

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

bây giờ sẽ là cách ngắn gọn nhất để cung cấp chức năng được yêu cầu trong OP.

Lưu ý: Ở trên không hoạt động trong IE8 hoặc thấp hơn

Là một giải pháp thay thế ngắn gọn hơn hoạt động trong IE8 (nếu tôi có thể tin tưởng vào chế độ IE8 của IE9) và không cần phải kích hoạt $(...).hover(...)mọi nơi, cũng không cần phải biết bộ chọn cho phần tử (trong trường hợp đó câu trả lời của Ivo dễ dàng hơn):

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

Tôi lấy ý tưởng của SLaks và gói nó trong một lớp học nhỏ .

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());
});

CHỈ FYI cho những người tìm thấy tương lai này.

Tôi đã tạo một plugin jQuery có thể làm điều này và nhiều hơn nữa. Trong plugin của tôi, để có được tất cả các yếu tố, con trỏ hiện đang được di chuột qua, chỉ cần làm như sau:

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

Như tôi đã đề cập, nó cũng có rất nhiều công dụng khác như bạn có thể thấy trong

jsFiddle tìm thấy ở đây

Vì tôi không thể bình luận, vì vậy tôi sẽ viết điều này như một câu trả lời!

Vui lòng hiểu sự khác biệt giữa bộ chọn css ": hover" và sự kiện di chuột!

": hover" là một bộ chọn css và thực sự đã bị xóa với sự kiện khi được sử dụng như thế này $("#elementId").is(":hover"), nhưng trong ý nghĩa của nó, nó thực sự không liên quan gì đến di chuột sự kiện jQuery.

nếu bạn viết mã $("#elementId:hover"), phần tử sẽ chỉ được chọn khi bạn di chuột bằng chuột. câu lệnh trên sẽ hoạt động với tất cả các phiên bản jQuery khi bạn chọn phần tử này với lựa chọn css thuần túy và hợp pháp.

Mặt khác, sự kiện di chuột là

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

thực sự bị phản đối vì jQuery 1.8 ở đây là trạng thái từ trang web jQuery:

Khi tên sự kiện "hover" được sử dụng, hệ thống con sự kiện sẽ chuyển đổi nó thành "mouseenter mouseleave" trong chuỗi sự kiện. Điều này gây phiền nhiễu vì nhiều lý do:

Ngữ nghĩa: Di chuột không giống như chuột vào và để lại một phần tử, nó ngụ ý một số lượng giảm tốc hoặc trì hoãn trước khi bắn. Tên sự kiện: Event.type được trả về bởi trình xử lý đính kèm không phải là di chuột, mà là mouseenter hoặc mouseleave. Không có sự kiện khác làm điều này. Đồng chọn tên "hover": Không thể đính kèm một sự kiện có tên "hover" và kích hoạt nó bằng cách sử dụng .trigger ("hover"). Các tài liệu đã gọi tên này là "không khuyến khích mã mới", tôi muốn từ chối chính thức cho 1.8 và cuối cùng xóa nó.

Tại sao họ loại bỏ việc sử dụng là (": hover") không rõ ràng nhưng ồ, bạn vẫn có thể sử dụng nó như trên và đây là một chút hack để vẫn sử dụng nó.

(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);

Ồ và tôi sẽ không giới thiệu phiên bản hết thời gian chờ vì điều này mang đến nhiều sự phức tạp , hãy sử dụng các chức năng hết thời gian cho loại công cụ này nếu không có cách nào khác và tin tôi, trong 95% trường hợp có một cách khác !

Hy vọng tôi có thể giúp một vài người ngoài kia.

Chúc mừng Andy

Cám ơn hai bạn. Tại một số thời điểm, tôi đã phải từ bỏ việc cố gắng phát hiện nếu con chuột vẫn còn trên phần tử. Tôi biết điều đó là có thể, nhưng có thể cần quá nhiều mã để thực hiện.

Phải mất một lúc nhưng tôi đã lấy cả hai lời đề nghị của bạn và đưa ra một cái gì đó sẽ làm việc cho tôi.

Đây là một ví dụ đơn giản (nhưng chức năng):

$("[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);
    }
);

Và sau đó để thực hiện công việc này trên một số văn bản, đây là tất cả những gì tôi phải làm:

<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.

Cùng với rất nhiều CSS ưa thích, điều này cho phép một số công cụ trợ giúp di chuột rất đẹp. Nhân tiện, tôi cần độ trễ trong quá trình rê chuột vì những khoảng trống nhỏ giữa các hộp kiểm và văn bản khiến cho sự trợ giúp lóe lên khi bạn di chuyển chuột. Nhưng điều này hoạt động như một nét duyên dáng. Tôi cũng đã làm một cái gì đó tương tự cho các sự kiện tập trung / mờ.

Tôi thấy thời gian chờ được sử dụng cho việc này rất nhiều, nhưng trong bối cảnh của một sự kiện, bạn không thể nhìn vào tọa độ, như thế này sao?:

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);
}

Tùy thuộc vào ngữ cảnh, bạn có thể cần đảm bảo (this == e.target) trước khi gọi areXYInside (e).

fyi- Tôi đang xem xét sử dụng phương pháp này bên trong trình xử lý dragLeave, để xác nhận rằng sự kiện dragLeave không được kích hoạt bằng cách đi vào phần tử con. Nếu bạn không kiểm tra bằng cách nào đó bạn vẫn ở trong phần tử cha, bạn có thể thực hiện sai hành động chỉ dành cho khi bạn thực sự rời khỏi cha mẹ.

EDIT: đây là một ý tưởng hay, nhưng không đủ hiệu quả. Có lẽ với một số điều chỉnh nhỏ.

Bạn có thể kiểm tra jQueryxem có div div nào có một lớp nhất định không. Sau đó, bằng cách áp dụng lớp đó khi bạn di chuột qua một div nhất định, bạn có thể kiểm tra xem chuột của bạn có vượt qua nó hay không, ngay cả khi bạn di chuột qua một yếu tố khác trên trang theo cách này ít mã hơn. Tôi đã sử dụng điều này bởi vì tôi có khoảng trống giữa các div trong một cửa sổ bật lên và tôi chỉ muốn đóng cửa sổ bật lên khi tôi rời khỏi cửa sổ bật lên, không phải khi tôi di chuyển chuột qua khoảng trống trong cửa sổ bật lên. Vì vậy, tôi đã gọi một chức năng di chuột trên div nội dung (cửa sổ bật lên đã kết thúc), nhưng nó sẽ chỉ kích hoạt chức năng đóng khi tôi xử lý div nội dung, VÀ nằm ngoài cửa sổ bật lên!

$ (". pop-up"). mouseover (hàm (e)
    {
    $ (này) .addClass ("kết thúc");
    });

$ (". pop-up"). mouseout (hàm (e)
    {
    $ (này) .removeClass ("hơn");
    });


$ ("# mainContent"). mouseover (hàm (e) {
            if (! $ (". đã mở rộng"). hasClass ("over")) {
            Drupal.dhtmlMothy.toggleMothy ($ (". Extended"));
        }
    });

Đây sẽ là cách dễ nhất để làm điều đó!

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

Đây là một kỹ thuật không dựa vào jquery và sử dụng matches API DOM gốc . Nó sử dụng tiền tố của nhà cung cấp để hỗ trợ các trình duyệt quay trở lại IE9. Xem matchecraftector trên caniuse.com để biết chi tiết đầy đủ.

Đầu tiên tạo chức năng MatchSelector, như vậy:

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);

Sau đó, để phát hiện di chuột:

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

Tôi đã trả lời điều này trong một câu hỏi khác, với tất cả các chi tiết bạn có thể cần:

Phát hiện IF di chuột qua phần tử với jQuery (có 99 upvote tại thời điểm viết)

Về cơ bản, bạn có thể làm một cái gì đó như:

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

Điều này chỉ hoạt động nếu oilà một đối tượng jQuery chứa một phần tử duy nhất. Nếu có nhiều yếu tố phù hợp, bạn cần áp dụng cho từng yếu tố, ví dụ:

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

Điều này đã được thử nghiệm bắt đầu jQuery 1.7.

Đây là một chức năng giúp bạn kiểm tra xem chuột có ở trong một phần tử hay không. Điều duy nhất bạn nên làm là gọi hàm mà bạn có thể có EventObject liên quan đến chuột trực tiếp. đại loại như thế này:

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

Bạn có thể xem mã nguồn ở đây trong github hoặc ở cuối bài:

https://github.com/ Maximumafirthebi/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;
    }
}

Mở rộng trên những gì 'Happytime harry' đã nói, hãy chắc chắn sử dụng hàm jquery .data () để lưu trữ id hết thời gian chờ. Điều này là để bạn có thể truy xuất id thời gian chờ rất dễ dàng khi 'mouseenter' được kích hoạt trên cùng phần tử đó sau đó, cho phép bạn loại bỏ trình kích hoạt cho chú giải công cụ của bạn biến mất.

Bạn có thể sử dụng các sự kiện mouseenter và mouseleave của jQuery. Bạn có thể đặt cờ khi chuột vào khu vực mong muốn và bỏ đặt cờ khi nó rời khỏi khu vực.

Tôi đã kết hợp các ý tưởng từ chủ đề này và đưa ra ý tưởng này, rất hữu ích cho việc hiển thị / ẩn một menu con:

$("#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");
 });

Dường như làm việc cho tôi. Hy vọng điều này sẽ giúp được ai đó.

EDIT: Bây giờ nhận ra phương pháp này không hoạt động chính xác trong IE.

Tôi không thể sử dụng bất kỳ đề xuất nào ở trên.
Tại sao tôi thích giải pháp của tôi?
Phương pháp này kiểm tra xem chuột có ở trên một phần tử bất kỳ lúc nào do Bạn chọn không .
Mouseenter và : hover rất tuyệt, nhưng mouseenter chỉ kích hoạt khi bạn di chuyển chuột chứ không phải khi phần tử di chuyển dưới chuột.
: hover khá ngọt ngào nhưng ... IE

Vì vậy, tôi làm điều này:

Không 1. lưu trữ vị trí chuột x, y mỗi khi nó di chuyển khi bạn cần,
Không 2. kiểm tra xem chuột có vượt qua bất kỳ yếu tố nào phù hợp với truy vấn không ... như kích hoạt sự kiện mouseenter

// 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");
    }
});

Chỉ cần lưu ý về câu trả lời Arthur Goldsmith phổ biến và hữu ích ở trên: Nếu bạn di chuyển chuột từ yếu tố này sang yếu tố khác trong IE (ít nhất là cho đến IE 9), bạn có thể gặp khó khăn khi điều này hoạt động chính xác nếu yếu tố mới có nền trong suốt (theo mặc định). Cách giải quyết của tôi là cung cấp cho phần tử mới một hình nền trong suốt.

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

VĨ CẦM

Bạn có thể sử dụng is(':visible');trong jquery Và với $ ('. Item: hover'), nó cũng hoạt động trong Jquery.

đây là một đoạn mã htm:

    <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>

và đây là Mã 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');

});

đây là những gì tôi đã nói về :)