Phát hiện IF di chuột qua phần tử với jQuery

Tôi không tìm kiếm một hành động để gọi khi di chuột, mà thay vào đó là một cách để biết liệu một phần tử có đang được di chuột qua hay không. Ví dụ:

$('#elem').mouseIsOver(); // returns true or false

Có một phương thức jQuery thực hiện điều này?

Bản gốc (Và đúng) Trả lời:

Bạn có thể sử dụng is()và kiểm tra bộ chọn :hover.

var isHovered = $('#elem').is(":hover"); // returns true or false

Ví dụ: http://jsfiddle.net/Meligy/2kyaJ/3/

(Điều này chỉ hoạt động khi bộ chọn khớp tối đa MỘT phần tử. Xem Chỉnh sửa 3 để biết thêm)

.

Chỉnh sửa 1 (ngày 29 tháng 6 năm 2013): (Chỉ áp dụng cho jQuery 1.9.x, vì nó hoạt động với 1.10+, xem Chỉnh sửa tiếp theo 2)

Câu trả lời này là giải pháp tốt nhất tại thời điểm câu hỏi được trả lời. Công cụ chọn ': hover' này đã bị xóa bằng cách .hover()xóa phương thức trong jQuery 1.9.x.

Điều thú vị là một câu trả lời gần đây của "allicarn" cho thấy có thể sử dụng :hoverlàm bộ chọn CSS (so với Sizzle) khi bạn đặt tiền tố với bộ chọn$($(this).selector + ":hover").length > 0 và có vẻ như nó hoạt động!

Ngoài ra, plugin hoverIntent được đề cập trong một câu trả lời khác trông cũng rất đẹp.

Chỉnh sửa 2 (ngày 21 tháng 9 năm 2013): .is(":hover") tác phẩm

Dựa trên một nhận xét khác tôi đã nhận thấy rằng cách ban đầu tôi đã đăng .is(":hover"), thực sự vẫn hoạt động trong jQuery, vì vậy.

1. Nó hoạt động trong jQuery 1.7.x.

2. Nó đã ngừng hoạt động vào 1.9.1, khi ai đó báo cáo với tôi và tất cả chúng tôi đều nghĩ rằng nó có liên quan đến việc jQuery xóa hoverbí danh để xử lý sự kiện trong phiên bản đó.

3. Nó đã hoạt động trở lại trong jQuery 1.10.1 và 2.0.2 (có thể là 2.0.x), điều này cho thấy rằng lỗi trong 1.9.x là một lỗi hoặc do đó không phải là hành vi có chủ ý như chúng ta đã nghĩ ở điểm trước.

Nếu bạn muốn kiểm tra điều này trong một phiên bản jQuery cụ thể, chỉ cần mở ví dụ JSFidlle ở đầu câu trả lời này, thay đổi thành phiên bản jQuery mong muốn và nhấp vào "Chạy". Nếu màu thay đổi khi di chuột, nó hoạt động.

.

Chỉnh sửa 3 (ngày 9 tháng 3 năm 2014): Nó chỉ hoạt động khi chuỗi jQuery chứa một phần tử duy nhất

Như được thể hiện bởi @Wilmer trong các bình luận, anh ta có một câu đố thậm chí không hoạt động đối với các phiên bản jQuery mà tôi và những người khác ở đây đã thử nghiệm nó. Khi tôi cố gắng tìm những gì đặc biệt về trường hợp của anh ấy, tôi nhận thấy rằng anh ấy đang cố kiểm tra nhiều yếu tố cùng một lúc. Đây là némUncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover .

Vì vậy, làm việc với fiddle của mình, điều này KHÔNG hoạt động:

var isHovered = !!$('#up, #down').filter(":hover").length;

Trong khi điều này không làm việc:

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

Nó cũng hoạt động với các chuỗi jQuery có chứa một phần tử, như nếu bộ chọn ban đầu chỉ khớp với một phần tử hoặc nếu bạn gọi .first()kết quả, v.v.

Điều này cũng được tham khảo tại Bản tin Tài nguyên & Mẹo dành cho Web + của tôi .

Sử dụng:

var hovered = $("#parent").find("#element:hover").length;

jQuery 1.9+

Nó không hoạt động trong jQuery 1.9. Tạo plugin này dựa trên câu trả lời của user2444818.

jQuery.fn.mouseIsOver = function () {
    return $(this).parent().find($(this).selector + ":hover").length > 0;
}; 

http://jsfiddle.net/Wp2v4/1/

Đặt cờ khi di chuột:

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

Sau đó, chỉ cần kiểm tra cờ của bạn.

Cặp đôi cập nhật để thêm sau khi làm việc về chủ đề này một thời gian:

1. tất cả các giải pháp với .is (": hover") đều bị hỏng trên jQuery 1.9.1
2. Lý do có khả năng nhất để kiểm tra xem chuột có còn ở trên một phần tử hay không là để cố gắng ngăn các sự kiện bắn vào nhau. Ví dụ: chúng tôi đã gặp sự cố với mouseleave của chúng tôi được kích hoạt và hoàn thành trước khi sự kiện mouseenter của chúng tôi thậm chí hoàn thành. Tất nhiên điều này là do một chuyển động chuột nhanh chóng.

Chúng tôi đã sử dụng hoverIntent https://github.com/briancherne/jquery-hoverIntent để giải quyết vấn đề cho chúng tôi. Về cơ bản, nó kích hoạt nếu chuyển động chuột có chủ ý hơn. (một điều cần lưu ý là nó sẽ kích hoạt trên cả hai con chuột nhập một phần tử và rời đi - nếu bạn chỉ muốn sử dụng một hàm vượt qua hàm tạo)

Bạn có thể lọc elment của bạn từ tất cả các yếu tố di chuột. Mã có vấn đề:

element.filter(':hover')

Lưu mã:

jQuery(':hover').filter(element)

Để trả về boolean:

jQuery(':hover').filter(element).length===0

Câu trả lời được chấp nhận không hoạt động với tôi trên JQuery 2.x .is(":hover")trả về sai trên mỗi cuộc gọi.

Tôi đã kết thúc với một giải pháp khá đơn giản mà hiệu quả:

function isHovered(selector) {

    return $(selector+":hover").length > 0

}

Mở rộng câu trả lời của @ Mohamed. Bạn có thể sử dụng một chút đóng gói

Như thế này:

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

Sử dụng nó như:

$("#elem").mouseIsOver();//returns true or false

Ngã ba câu đố: http://jsfiddle.net/cgWdF/1/

Tôi thích phản hồi đầu tiên, nhưng đối với tôi nó thật kỳ lạ. Khi cố gắng kiểm tra ngay sau khi tải trang cho chuột, tôi phải đặt độ trễ ít nhất 500 mili giây để nó hoạt động:

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

Đặt cờ cho câu trả lời của kinakuta có vẻ hợp lý, bạn có thể đặt người nghe lên phần thân để bạn có thể kiểm tra xem có phần tử nào đang được di chuột qua ngay lập tức không.

Tuy nhiên, làm thế nào để bạn muốn đối phó với các nút con? Có lẽ bạn nên kiểm tra xem phần tử có phải là tổ tiên của phần tử đang di chuột không.

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>