Eksik olduğum jQuery bunu yapmak için hızlı ve kolay bir yolu var mı?

Fareyle üzerine gelme etkinliğini kullanmak istemiyorum çünkü zaten başka bir şey için kullanıyorum. Sadece farenin belirli bir anda bir öğenin üzerinde olup olmadığını bilmem gerekiyor.

Sadece bir "IsMouseOver" işlevi varsa, böyle bir şey yapmak istiyorum:

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

Farenin solması için zaman aşımını ayarlayın ve dönüş değerini nesnedeki verilere depolayın. Ardından, verilerde bir değer varsa zaman aşımını iptal edin.

Soldurmanın geri çağrılmasıyla ilgili verileri kaldırın.

Mouseenter / mouseleave kullanmak aslında daha ucuzdur, çünkü çocuklar fareyle mouseover / mouseout fire yaparken menü için ateş etmezler.

Bu kod ne mutlu zaman harry gösterir ve ben söylemeye çalışıyorum. Fare girdiğinde, bir araç ipucu ortaya çıkar, fare ayrıldığında, kaybolması için bir gecikme ayarlar. Fare, gecikme tetiklenmeden önce aynı öğeye girerse, daha önce sakladığımız verileri kullanarak tetikleyiciyi sönmeden önce yok ederiz.

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

Temiz ve zarif bir vurgulu kontrol:

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

UYARI: is(':hover')jquery 1.8+ 'da kullanımdan kaldırılmıştır. Çözüm için bu gönderiye bakın .

Bu yanıtı da kullanabilirsiniz: https://stackoverflow.com/a/6035278/8843 farenin bir öğenin üzerine gelip gelmediğini test etmek için:

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

hoverManuel olarak takip etmek için jQuery etkinliğini kullanabilirsiniz:

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

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

Tam olarak böyle bir şeye ihtiyacım vardı (biraz daha karmaşık bir ortamda ve 'mouseenters' ve 'mouseleaves' çok düzgün çalışmayan bir çözüm), bu yüzden yöntemi ismouseover ekleyen küçük bir jquery eklentisi oluşturdum. Şimdiye kadar oldukça iyi çalıştı.

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

Sonra belgenin herhangi bir yerinde böyle adlandırın ve doğru veya yanlış döndürür:

$("#player").ismouseover()

IE7 +, Chrome 1+ ve Firefox 4'te test ettim ve düzgün çalışıyor.

JQuery'de .is (': hover') kullanabilirsiniz,

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

artık OP'de istenen işlevi sağlamanın en özlü yolu olacaktı.

Not: Yukarıdaki IE8 veya daha düşük sürümlerde çalışmaz

IE8'de çalışan daha az özlü bir alternatif olarak (IE9'un IE8 modülüne güvenebilirsem) ve $(...).hover(...)her yerde tetiklemeden yapar veya öğe için bir seçici bilmeyi gerektirmez (bu durumda Ivo'nun cevabı daha kolaydır):

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

SLaks'ın fikrini aldım ve küçük bir sınıfa tamamladım .

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

Sadece gelecekteki bulucular için FYI.

Bunu ve çok daha fazlasını yapabilen bir jQuery eklentisi yaptım. Eklentimde, imlecin o anda üzerinde bulunduğu tüm öğeleri almak için şunları yapın:

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

Bahsettiğim gibi, ayrıca gördüğünüz gibi bir sürü başka kullanım alanı var

jsFiddle burada bulundu

Yorum yapamadığım için bunu bir cevap olarak yazacağım!

Lütfen css selector ": hover" ile hover olayı arasındaki farkı anlayın!

": hover" bir css seçicisidir ve bu şekilde kullanıldığında gerçekten olayla birlikte kaldırılmıştır $("#elementId").is(":hover"), ancak bu , jQuery olay fareyle gerçekten ilgisi yoktur.

kod yazarsanız $("#elementId:hover"), öğe yalnızca fareyle üzerine geldiğinizde seçilir. Yukarıdaki ifade, saf ve yasal css seçimi ile bu öğeyi seçtiğiniz gibi tüm jQuery sürümleriyle çalışacaktır.

Öte yandan olay vurgulu

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

gerçekten de jQuery 1.8 olarak jQuery web sitesinden devlet:

Olay adı "üzerine gelindiğinde" kullanıldığında, olay alt sistemi, olay dizesindeki "mouseenter faresi" haline dönüştürür. Bu çeşitli nedenlerle can sıkıcıdır:

Anlambilim: Fareyle üzerine gelme, bir öğeye giren ve çıkan fareyle aynı değildir, ateş etmeden önce bir miktar yavaşlama veya gecikme anlamına gelir. Olay adı: Ekli işleyici tarafından döndürülen event.type, fareyle üzerine gelmez, ancak mouseenter veya fareyle bırakılır. Başka hiçbir olay bunu yapmaz. "Fareyle üzerine gelme" adının birlikte seçilmesi: "Fareyle üzerine gelme" adıyla bir olay eklemek ve .trigger ("hover") kullanarak tetiklemek mümkün değildir. Dokümanlar zaten bu adı "yeni kod için şiddetle tavsiye edilmedi" olarak adlandırıyor, resmi olarak 1.8 için kullanımdan kaldırmak ve sonunda kaldırmak istiyorum.

Kullanım neden kaldırıldı (": vurgulu") belirsiz ama oh iyi, yine de yukarıdaki gibi kullanabilirsiniz ve burada hala kullanmak için küçük bir kesmek.

(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 ve ben zaman aşımı sürümünü tavsiye etmem , çünkü bu çok karmaşıklık getirir , başka bir yol yoksa bu tür şeyler için zaman aşımı işlevlerini kullanın ve bana inan , tüm vakaların% 95'inde başka bir yol var !

Umarım orada birkaç kişiye yardım edebilirim.

Greetz Andy

İkinize de teşekkürler. Bir noktada, farenin hala öğenin üzerinde olup olmadığını tespit etmeye çalışmaktan vazgeçtim. Bunun mümkün olduğunu biliyorum, ancak başarmak için çok fazla kod gerektirebilir.

Biraz zamanımı aldı ama her iki önerinizi de aldım ve benim için işe yarayacak bir şey buldum.

İşte basitleştirilmiş (ancak işlevsel) bir örnek:

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

Ve sonra bazı metin üzerinde bu işi yapmak için tek yapmam gereken bu:

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

Bir sürü süslü CSS ile birlikte, bu çok güzel fareyle üzerine gelme yardım araç ipuçlarına izin verir. Bu arada, fareyi hareket ettirirken yardımın yanıp sönmesine neden olan onay kutuları ve metin arasındaki küçük boşluklar nedeniyle fareyle ilgili gecikmeye ihtiyacım vardı. Ama bu bir cazibe gibi çalışıyor. Ayrıca odaklama / bulanıklık olayları için de benzer bir şey yaptım.

Bunun için zaman aşımlarının çok kullanıldığını görüyorum, ancak bir olay bağlamında, koordinatlara bakamıyor musunuz ?:

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

Bağlama bağlı olarak, areXYInside (e) öğesini çağırmadan önce (this == e.target) emin olmanız gerekebilir.

fyi- Bu yaklaşımı, dragLeave olayının bir alt öğeye giderek tetiklenmediğini doğrulamak için bir dragLeave işleyicisi içinde kullanmaya bakıyorum. Bir şekilde hala üst öğenin içinde olup olmadığınızı kontrol etmezseniz, yanlışlıkla yalnızca üst öğeyi gerçekten terk ettiğinizde yapılması gereken işlemleri gerçekleştirebilirsiniz.

EDIT: Bu güzel bir fikir, ama yeterince tutarlı çalışmıyor. Belki bazı küçük ayarlamalar ile.

jQueryHerhangi bir alt div belirli bir sınıfa sahip olup olmadığını test edebilirsiniz . Daha sonra, fareyi belirli bir divın üzerine ve dışına getirdiğinizde o sınıfı uygulayarak, fareyi sayfada farklı bir öğenin üzerine getirseniz bile, farenizin üzerinde olup olmadığını test edebilirsiniz. Bunu kullandım çünkü bir pop-up'ta div'lar arasında boşluklar vardı ve pop-up'ı sadece pop-up'dan hareket ettirdiğimde kapatmak istedim, faremi pop-up'daki boşlukların üzerine getirirken değil. Bu yüzden içerik bölmesinde (açılır pencerenin bittiği) fareyle üzerine gelme işlevini aradım, ancak kapatma işlevini yalnızca içerik divının üzerine getirdiğimde ve VE açılır pencerenin dışındayken tetikleyecekti!

$ ( "Açılır"). Mouseover (function (e)
    {
    ( "Over") (bu) .addClass, $;
    });

$ ( "Açılır"). Mouseout (function (e)
    {
    ( "Over") (bu) .removeClass, $;
    });


$ ( "# MainContent"). Mouseover (function (e) {
            if (! $ (". expanded"). hasClass ("over")) {
            Drupal.dhtmlMenu.toggleMenu ($ () "genişletilmiş.");
        }
    });

Bunu yapmanın en kolay yolu bu olurdu!

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

İşte jquery'ye dayanmayan ve yerel DOM matches API'sını kullanan bir teknik . IE9'a geri dönen tarayıcıları desteklemek için satıcı öneklerini kullanır. Tüm ayrıntılar için caniuse.com adresindeki matchesselector'a bakın.

İlk olarak matchSelector işlevini şu şekilde oluşturun:

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

Ardından, fareyle üzerine gelindiğini tespit etmek için:

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

Bunu başka bir soruda yanıtladım, ihtiyacınız olabilecek tüm ayrıntılarla:

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

Temel olarak, şöyle bir şey yapabilirsiniz:

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

Bu yalnızca oitek bir öğe içeren bir jQuery nesnesi olduğunda çalışır . Eşleşen birden çok öğe varsa, her bir öğeye uygulamanız gerekir, örneğin:

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

Bu, jQuery 1.7'den başlayarak test edildi.

İşte farenin bir öğenin içinde olup olmadığını kontrol etmenize yardımcı olan bir işlev. Yapmanız gereken tek şey, canlı fare ile ilişkili EventObject'e sahip olabileceğiniz işlevi çağırmaktır. böyle bir şey:

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

Kaynak kodunu burada github'da veya yazının altında görebilirsiniz:

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

'Happytime harry' söylediklerine bağlı olarak, zaman aşımı kimliğini saklamak için .data () jquery işlevini kullandığınızdan emin olun. Bu, daha sonra aynı öğede 'mouseenter' tetiklendiğinde zaman aşımı kimliğini çok kolay bir şekilde alabilmenizi sağlar ve böylece araç ipucunuzun kaybolması için tetikleyiciyi ortadan kaldırmanıza olanak tanır.

JQuery'nin mouseenter ve mouseleave olaylarını kullanabilirsiniz. Fare istenen alana girdiğinde bir bayrak ayarlayabilir ve alandan ayrıldığında bayrağın ayarını kaldırabilirsiniz.

Bu konuyla ilgili fikirleri birleştirdim ve bir alt menüyü göstermek / gizlemek için yararlı olan bu konuyu buldum:

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

Benim için iş gibi görünüyor. Umarım bu birine yardımcı olur.

EDIT: Şimdi bu yaklaşımın IE'de doğru çalışmıyor olduğunu fark.

Yukarıdaki önerilerin hiçbirini kullanamadım.
Çözümümü neden tercih ediyorum?
Bu yöntem, farenin sizin tarafınızdan seçilen herhangi bir zamanda bir öğenin üzerinde olup olmadığını kontrol eder .
Fare merkezi ve : vurgulu çok iyi, ancak fare fare öğesi yalnızca fareyi hareket ettirdiğinizde tetiklenir, öğe farenin altında hareket ettiğinde değil.
: vurgulu oldukça tatlı ama ... IE

Yani bunu yapıyorum:

Hayır 1. fare x, y konumunu, gerektiğinde her hareket ettirildiğinde saklayın,
Hayır 2. farenin sorguyla eşleşen öğelerin üzerinde olup olmadığını kontrol edin ...

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

Yukarıdaki popüler ve yararlı Arthur Goldsmith yanıtı hakkında bir not: Farenizi IE'de bir öğeden diğerine taşıyorsanız (en azından IE 9'a kadar), yeni öğenin bir şeffaf arka plan (varsayılan olarak olurdu). Geçici çözümüm, yeni öğeye şeffaf bir arka plan görüntüsü vermekti.

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

VAKTİNİ BOŞA HARCAMAK

is(':visible');Jquery'de kullanabilirsiniz Ve $ ('. İtem: hover') için de Jquery'de çalışıyor.

bu bir htm kodu 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>

ve bu JS Kodu:

$('.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');

});

bahsettiğim bu :)