JQuery ile öğenin üzerine geldiğinde EĞER algıla

Ben aramak için bir eylem aramıyorum zaman gezinip, ancak bunun yerine bir yolu anlatmak için eğer bir öğesi şu anda üzerinde süpürdü ediliyor. Örneğin:

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

Bunu başaran bir jQuery yöntemi var mı?

Orijinal (Ve Doğru) Cevap:

is()Seçiciyi kullanabilir ve kontrol edebilirsiniz :hover.

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

Örnek: http://jsfiddle.net/Meligy/2kyaJ/3/

(Bu yalnızca seçicinin en fazla ONE öğe ile eşleşmesi durumunda çalışır. Daha fazla bilgi için Düzen 3'e bakın)

.

Düzenleme 1 (29 Haziran 2013): (Yalnızca 1.10+ ile çalıştığı için jQuery 1.9.x için geçerlidir, sonraki Düzen 2'ye bakın)

Bu cevap, sorunun cevaplandığı andaki en iyi çözümdü. Bu ': vurgulu' seçici, .hover()jQuery 1.9.x'te yöntem kaldırılarak kaldırıldı.

İlginç bir şekilde, "allicarn" tarafından yapılan son bir cevap :hover, bir seçici ile ön ek yaptığınızda CSS seçici (Sizzle vs.) olarak kullanılabileceğini gösteriyor $($(this).selector + ":hover").length > 0ve işe yarıyor gibi görünüyor!

Ayrıca, başka bir cevapta bahsedilen hoverIntent eklentisi de çok güzel görünüyor.

Edit 2 (21 Eylül 2013): .is(":hover") çalışır

Ben başka bir yorum dayanarak, ben .is(":hover")aslında jQuery, aslında yayınladığım, orijinal yol , bu yüzden fark ettim .

1. JQuery 1.7.x'te çalıştı.

2. Birisi bana rapor ettiğinde 1.9.1'de çalışmayı durdurdu ve hepimiz bunun jQuery'nin hovero sürümdeki olay işleme için takma adı kaldırmasıyla ilgili olduğunu düşündük .

3. Yine jQuery 1.10.1 ve 2.0.2'de (belki 2.0.x) çalıştı, bu da 1.9.x'deki hatanın bir önceki noktada düşündüğümüz gibi kasıtlı bir davranış veya bir hata olduğunu düşündürüyor.

Bunu belirli bir jQuery sürümünde test etmek isterseniz, bu cevabın başında JSFidlle örneğini açmanız, istediğiniz jQuery sürümüne geçmeniz ve "Çalıştır" ı tıklamanız yeterlidir. Fareyle üzerine gelindiğinde renk değişirse çalışır.

.

Düzenleme 3 (9 Mart 2014): Yalnızca jQuery dizisi tek bir öğe içerdiğinde çalışır

@Wilmer tarafından yorumlarda gösterildiği gibi, jQuery sürümlerine karşı bile çalışmayan bir keman var ve ben burada diğerleri test etti. Davası hakkında özel olanı bulmaya çalıştığımda, bir kerede birden fazla unsuru kontrol etmeye çalıştığını fark ettim. Bu fırlatıyordu Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover.

Yani, onun kemençe ile çalışan bu mu DEĞİL çalışır:

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

Bu işe yarar olsa da :

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

Ayrıca denilen eğer orijinal seçici sadece bir eleman uyum olursa gibi tek eleman bulunduran veya jQuery dizileri ile çalışır .first()sonuçlarına vs.

Bu ayrıca JavaScript + Web Geliştirme İpuçları ve Kaynaklar Haber Bültenimde de belirtilmektedir .

kullanın:

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

jQuery 1.9+

JQuery 1.9 ile çalışmaz. Bu eklentiyi user2444818'in cevabına göre yaptık.

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

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

Fareyle üzerine gelindiğinde bir bayrak ayarlayın:

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

Sonra bayrağını kontrol et.

Bir süre bu konuda çalıştıktan sonra eklenecek birkaç güncelleme:

1. jQuery 1.9.1 üzerinde .is (": hover") sonu bulunan tüm çözümler
2. Farenin hala bir öğenin üzerinde olup olmadığını kontrol etmenin en olası nedeni, olayların birbiri üzerinde tetiklenmesini önlemeye çalışmaktır. Örneğin, fare üssümüzün mouseenter etkinliğimiz bile tamamlanmadan tetiklenip tamamlanmasıyla ilgili sorunlar yaşıyorduk. Tabii ki bu hızlı bir fare hareketinden kaynaklanıyordu.

Sorunu bizim için çözmek için hoverIntent https://github.com/briancherne/jquery-hoverIntent kullandık . Temelde fare hareketi daha bilinçli ise tetiklenir. (not edilmesi gereken bir şey, hem fareye bir öğe girip hem de bırakarak tetikleyeceğidir - sadece bir tane kullanmak istiyorsanız boş bir işlev yapıcı)

Seçiminizi, üzerine gelinen tüm öğelerden filtreleyebilirsiniz. Sorunlu kod:

element.filter(':hover')

Kodu kaydet:

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

Boole'ye dönmek için:

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

Kabul edilen cevap benim için işe yaramadı JQuery 2.x .is(":hover")her çağrıda yanlış döndürür.

Sonunda işe yarayan oldukça basit bir çözüm buldum:

function isHovered(selector) {

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

}

@ Mohamed'in cevabına genişleyen. Biraz kapsülleme kullanabilirsiniz

Bunun gibi:

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

Gibi kullanın:

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

Kemanı çatalladı: http://jsfiddle.net/cgWdF/1/

İlk yanıtı seviyorum, ama benim için garip. Fare için sayfa yüklendikten hemen sonra kontrol etmeye çalışırken, çalışması için en az 500 milisaniye gecikme koymam gerekiyor:

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

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

Kinakuta'nın cevabı başına bir bayrak ayarlamak mantıklı görünüyor, vücuda bir dinleyici koyabilirsiniz, böylece herhangi bir öğenin belirli bir anda üzerine gelip gelmediğini kontrol edebilirsiniz.

Ancak, alt düğümlerle nasıl başa çıkmak istersiniz? Belki de, öğenin o anda üzerinde bulunan öğenin atası olup olmadığını kontrol etmelisiniz.

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