Apakah ada cara cepat & mudah untuk melakukan ini di jQuery yang saya lewatkan?

Saya tidak ingin menggunakan acara mouseover karena saya sudah menggunakannya untuk hal lain. Saya hanya perlu tahu apakah mouse berada di atas elemen pada saat tertentu.

Saya ingin melakukan sesuatu seperti ini, jika saja ada fungsi "IsMouseOver":

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

Tetapkan batas waktu pada mouseout ke fadeout dan simpan nilai kembali ke data dalam objek. Kemudian, padamouseover, batalkan batas waktu jika ada nilai dalam data.

Hapus data pada panggilan balik fadeout.

Sebenarnya lebih murah menggunakan mouseenter / mouseleave karena mereka tidak memecat menu ketika anak-anak mouseover / mouseout fire.

Kode ini menggambarkan apa yang saya dan Harry happytime coba katakan. Ketika mouse masuk, tooltip keluar, ketika mouse meninggalkannya mengatur penundaan untuk menghilang. Jika mouse memasukkan elemen yang sama sebelum penundaan dipicu, maka kami menghancurkan pelatuk sebelum mematikan menggunakan data yang kami simpan sebelumnya.

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

Pemeriksaan kursor yang bersih dan elegan:

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

PERINGATAN: is(':hover')ditinggalkan dalam jquery 1.8+. Lihat posting ini untuk solusinya.

Anda juga dapat menggunakan jawaban ini: https://stackoverflow.com/a/6035278/8843 untuk menguji apakah mouse mengarahkan elemen:

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

Anda dapat menggunakan hoveracara jQuery untuk melacak secara manual:

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

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

Saya membutuhkan sesuatu yang persis seperti ini (di lingkungan yang sedikit lebih kompleks dan solusi dengan banyak 'mouseenters' dan 'mouseleave' tidak berfungsi dengan baik) jadi saya membuat plugin jquery kecil yang menambahkan metode ismouseover. Sejauh ini telah bekerja dengan cukup baik.

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

Kemudian di sembarang tempat dokumen Anda menyebutnya seperti ini dan mengembalikan benar atau salah:

$("#player").ismouseover()

Saya mengujinya pada IE7 +, Chrome 1+ dan Firefox 4 dan berfungsi dengan baik.

Di jQuery Anda bisa menggunakan .is (': hover'), jadi

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

sekarang akan menjadi cara paling ringkas untuk menyediakan fungsi yang diminta dalam OP.

Catatan: Di atas tidak berfungsi di IE8 atau lebih rendah

Sebagai alternatif yang tidak terlalu ringkas yang berfungsi di IE8 (jika saya bisa mempercayai modus IE8 IE9), dan melakukannya tanpa memicu di $(...).hover(...)semua tempat, juga tidak perlu mengetahui pemilih untuk elemen (dalam hal ini jawaban Ivo lebih mudah):

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

Saya mengambil ide SLaks dan membungkusnya dalam kelas kecil .

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

HANYA FYI untuk pencari masa depan ini.

Saya membuat plugin jQuery yang dapat melakukan ini dan banyak lagi. Di plugin saya, untuk mendapatkan semua elemen kursor saat ini berada di atas, cukup lakukan hal berikut:

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

Seperti yang saya sebutkan, ia juga memiliki banyak kegunaan lain seperti yang Anda lihat di

jsFiddle ditemukan di sini

Karena saya tidak dapat berkomentar, maka saya akan menulis ini sebagai jawaban!

Harap mengerti perbedaan antara pemilih css ": hover" dan acara hover!

": hover" adalah pemilih css dan benar-benar dihapus dengan acara ketika digunakan seperti ini $("#elementId").is(":hover"), tetapi artinya itu tidak ada hubungannya dengan acara jQuery.

jika Anda kode $("#elementId:hover") , elemen hanya akan dipilih ketika Anda membawa mouse. pernyataan di atas akan bekerja dengan semua versi jQuery saat Anda memilih elemen ini dengan pilihan css murni dan sah.

Di sisi lain acara melayang yang

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

memang dicabut sebagai jQuery 1.8 di sini status dari situs web jQuery:

Ketika nama acara "hover" digunakan, subsistem acara mengubahnya menjadi "mouseenter mouseleave" di string acara. Ini menjengkelkan karena beberapa alasan:

Semantik: Melayang tidak sama dengan mouse yang masuk dan meninggalkan elemen, itu menunjukkan sejumlah perlambatan atau penundaan sebelum menembak. Nama acara: Jenis acara yang dikembalikan oleh pawang yang dilampirkan tidak melayang, tetapi mouseenter atau mouseous. Tidak ada acara lain yang melakukan ini. Memilih "hover" nama: Tidak mungkin untuk melampirkan peristiwa dengan nama "hover" dan memecatnya menggunakan .trigger ("hover"). Dokumen sudah memanggil nama ini "sangat tidak disarankan untuk kode baru", saya ingin mencabutnya secara resmi untuk 1,8 dan akhirnya menghapusnya.

Mengapa mereka menghapus penggunaannya adalah (": hover") tidak jelas tetapi oh well, Anda masih dapat menggunakannya seperti di atas dan di sini ada sedikit retasan untuk tetap menggunakannya.

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

Oh dan saya tidak akan merekomendasikan versi timeout karena ini membawa banyak kompleksitas , gunakan fungsi timeout untuk hal-hal semacam ini jika tidak ada cara lain dan percayalah, pada 95% dari semua kasus ada cara lain !

Semoga saya bisa membantu beberapa orang di luar sana.

Greetz Andy

Terima kasih untuk kalian berdua. Pada titik tertentu saya harus menyerah untuk mencoba mendeteksi apakah mouse masih melebihi elemen. Saya tahu ini mungkin, tetapi mungkin membutuhkan terlalu banyak kode untuk diselesaikan.

Butuh beberapa saat, tetapi saya menerima kedua saran Anda dan menemukan sesuatu yang akan bekerja untuk saya.

Berikut ini contoh sederhana (tetapi fungsional):

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

Dan kemudian untuk membuat ini bekerja pada beberapa teks, ini yang harus saya lakukan:

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

Seiring dengan banyak CSS mewah, ini memungkinkan beberapa tooltips bantuan mouseover yang sangat bagus. Ngomong-ngomong, saya perlu penundaan di mouseout karena ada celah kecil antara kotak centang dan teks yang menyebabkan bantuan untuk flash saat Anda memindahkan mouse. Tapi ini bekerja seperti pesona. Saya juga melakukan hal serupa untuk acara fokus / blur.

Saya melihat timeout banyak digunakan untuk ini, tetapi dalam konteks suatu peristiwa, tidak bisakah Anda melihat koordinat, seperti ini ?:

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

Bergantung pada konteks, Anda mungkin perlu memastikan (ini == e.target) sebelum memanggil areXYInside (e).

fyi- Saya melihat menggunakan pendekatan ini di dalam penangan dragLeave, untuk mengkonfirmasi bahwa acara dragLeave tidak dipicu dengan masuk ke elemen anak. Jika Anda tidak memastikan bahwa Anda masih berada di dalam elemen induk, Anda mungkin keliru mengambil tindakan yang dimaksudkan hanya ketika Anda benar-benar meninggalkan orangtua.

EDIT: ini ide yang bagus, tetapi tidak bekerja cukup konsisten. Mungkin dengan beberapa penyesuaian kecil.

Anda dapat menguji dengan jQueryapakah ada anak div memiliki kelas tertentu. Kemudian dengan menerapkan kelas itu ketika Anda mengarahkan mouse ke luar dan keluar div tertentu, Anda dapat menguji apakah mouse Anda di atasnya, bahkan ketika Anda mengarahkan mouse ke elemen yang berbeda pada halaman apalagi kode dengan cara ini. Saya menggunakan ini karena saya memiliki spasi antara divs dalam pop-up, dan saya hanya ingin menutup pop up ketika saya pindah dari pop up, bukan ketika saya menggerakkan mouse saya di atas ruang di pop up. Jadi saya memanggil fungsi mouseover pada div konten (yang pop up selesai), tetapi hanya akan memicu fungsi close ketika saya moused-over div konten, DAN berada di luar pop up!

$ (". pop-up"). mouseover (fungsi (e)
    {
    $ (ini) .addClass ("over");
    });

$ (". pop-up"). mouseout (fungsi (e)
    {
    $ (ini) .removeClass ("over");
    });


$ ("# mainContent"). mouseover (fungsi (e) {
            if (! $ (". diperluas"). hasClass ("over")) {
            Drupal.dhtmlMenu.toggleMenu ($ (". Diperluas"));
        }
    });

Ini akan menjadi cara termudah untuk melakukannya!

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

Berikut adalah teknik yang tidak bergantung pada jquery dan menggunakan matches API DOM asli . Ini menggunakan awalan vendor untuk mendukung browser kembali ke IE9. Lihat matchesselector di caniuse.com untuk detail lengkap.

Pertama buat fungsi matchSelector, seperti:

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

Kemudian, untuk mendeteksi kursor:

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

Saya telah menjawab ini dalam pertanyaan lain, dengan semua perincian yang mungkin Anda butuhkan:

Mendeteksi JIKA melayang di atas elemen dengan jQuery (memiliki 99 upvotes pada saat penulisan)

Pada dasarnya, Anda dapat melakukan sesuatu seperti:

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

Ini hanya berfungsi jika oiobjek jQuery berisi elemen tunggal. Jika ada beberapa elemen yang cocok, Anda perlu menerapkan ke setiap elemen, misalnya:

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

Ini diuji mulai jQuery 1.7.

Berikut adalah fungsi yang membantu Anda memeriksa apakah mouse ada di dalam elemen atau tidak. Satu-satunya hal yang harus Anda lakukan adalah memanggil fungsi tempat Anda dapat memiliki EventObject yang berhubungan dengan mouse. sesuatu seperti ini:

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

Anda dapat melihat kode sumber di sini di github atau di bagian bawah posting:

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

Memperluas apa yang dikatakan 'Happytime harry', pastikan untuk menggunakan fungsi jquery .data () untuk menyimpan id batas waktu. Ini agar Anda dapat mengambil id timeout dengan sangat mudah ketika 'mouseenter' dipicu pada elemen yang sama nanti, memungkinkan Anda untuk menghilangkan pelatuk agar tooltip Anda menghilang.

Anda dapat menggunakan acara mouseenter dan mouseleave jQuery. Anda dapat mengatur bendera saat mouse memasuki area yang diinginkan dan menghapus flag saat meninggalkan area.

Saya menggabungkan ide-ide dari topik ini dan menghasilkan ini, yang berguna untuk menunjukkan / menyembunyikan submenu:

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

Tampaknya bekerja untuk saya. Semoga ini bisa membantu seseorang.

EDIT: Sekarang menyadari pendekatan ini tidak berfungsi dengan benar di IE.

Saya tidak dapat menggunakan saran di atas.
Mengapa saya lebih suka solusi saya?
Metode ini memeriksa apakah mouse berada di atas elemen kapan saja dipilih oleh Anda .
Mouseenter dan : melayang - layang itu keren, tetapi mouseenter terpicu hanya jika Anda menggerakkan mouse, bukan ketika elemen bergerak di bawah mouse.
: melayang-layang cukup manis tapi ... IE

Jadi saya melakukan ini:

Tidak 1. simpan mouse x, posisi y setiap kali dipindahkan saat Anda perlu,
Tidak. 2. periksa apakah mouse berada di atas elemen yang cocok dengan kueri, lakukan hal-hal ... seperti memicu acara 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");
    }
});

Hanya catatan tentang jawaban Arthur Goldsmith yang populer dan membantu di atas: Jika Anda menggerakkan mouse Anda dari satu elemen ke elemen lain di IE (setidaknya hingga IE 9), Anda mungkin mengalami masalah untuk membuatnya berfungsi dengan benar jika elemen baru tersebut memiliki latar belakang transparan (yang akan secara default). Solusi saya adalah memberi elemen baru gambar latar belakang transparan.

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

BIOLA

Anda dapat menggunakan is(':visible');di jquery Dan untuk $ ('. Item: hover') itu juga berfungsi di Jquery.

ini adalah snnipet kode 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>

dan ini adalah Kode 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');

});

ini yang saya bicarakan :)