jQuery perché: hover funziona solo una volta?

Question

Ho utilizzato il seguente snippet per determinare in Chrome/Safari & FF se un utente passa con il mouse su un ancoraggio.

var isURL = $("a", obj).is(":hover"); 

Ho visto diversi post su: hover essere un selettore CSS, ma quello che non riesco a ottenere la mia testa intorno è il motivo per cui il codice restituisce vero se c'è 1 collegamento all'interno obj ma getta una javascript espressione non riconosciuta al passaggio del mouse al volo se ce ne sono 2 o più.

Ecco un violino di: hover di lavoro: - http://jsfiddle.net/2kyaJ/122/

Stesse ma più elementi (non funzionante): - http://jsfiddle.net/2kyaJ/121/

Qualcuno può spiegare questo a me?

Tra l'altro ho visto questo ... How do I check if the mouse is over an element in jQuery?

4 anni sul è questo ancora il migliore e apparentemente solo modo per determinare se un utente è in bilico sopra un elemento? Se sì qualcuno sarebbe in grado di fornire un esempio?

Modifica: ha dovuto andare a pescare esattamente ciò di cui avevo bisogno, ma si scopre che, per quanto semplice sia, funziona davvero bene.

Attualmente lo sto usando all'interno di un plugin con jQuery 1.9.1 dove sto attivando un'animazione su un mouseover di un elemento genitore (obj). Spero che qualcun altro lo trovi utile in futuro. Usa .length invece di .size come .size è deprecato dalla versione 1.8 in poi.

 function isMouseOver() { 
      if ($('a:hover', obj).length != 0) { 
       return true; 
      } else { 
       return false; 
      }       
     } 

Usage:

var isURL = isMouseOver(); 

Answer 1

:hover non è documentato a http://api.jquery.com/ - come tale non mi fiderei che funzioni in un modo particolare. Il problema sembra essere che Sizzle si stia confondendo con questo pseudo-selettore quando c'è più di un elemento da scorrere nella raccolta, anche se non posso davvero dire whey guardando il codice.

Il fatto che è anche lavorando nel primo esempio sembra essere un bug: http://jsfiddle.net/2kyaJ/122/ - non funziona con jQuery 1.9

Quanto a come capire se un elemento è aleggiava - Sono non sono sicuro di quali circostanze avresti bisogno di farlo. Invece, è meglio agire quando viene attivato un hover. È possibile eseguire il binding a un evento "simile al passaggio del mouse" con mouseover e mouseenter. C'è, naturalmente, lo pseudo-selettore CSS :hover.

Answer 2

Prova questo violino http://jsfiddle.net/2rU4U/:

setInterval(function(){ 
    var $sample = $(".sample"); 

    $sample.each(function(index) { 
     if($(this).is(":hover")) { 
      $(this).css("background", "yellow"); 
     } 
     else { 
      $(this).css("background", ""); 
     } 
    }); 
}, 200); 

Come accennato nel commento di cui sopra, questo rispetta il fatto che un insieme di elementi potrebbe essere restituito, e non solo uno solo. Potrebbe causare un po 'di sovraccarico con un sacco di elementi, naturalmente ...!

Answer 3

Onestamente, l'impostazione di un intervallo è una pessima idea ...

Basta impostare un ascoltatore hover.

$('.sample').hover(function() { 
    console.log($this) // $(this) is the currently hovered element 
}) 

JSFiddle: http://jsfiddle.net/jeffshaver/2kyaJ/124/

Answer 4

Per quanto riguarda il motivo per cui non funziona il vostro senso, direi che potrebbe essere un bug o potrebbe essere che è senza documenti. Non lo so davvero.

Tuttavia, ecco un esempio che funziona in jQuery 1.7.1, 1.9, e 2.0.0b1: http://jsfiddle.net/2kyaJ/125/

In sostanza, invece di utilizzare .is() è possibile interrogare per tutti gli elementi aleggiava e quindi controllare che non vi sia almeno una partita ($(".sample:hover").length anziché $(".sample").is(":hover")).

Ho avuto l'impressione che volessi evidenziare tutti gli elementi .sample quando uno di essi è al passaggio del mouse, quindi il primo jsfiddle. Tuttavia, se si desidera solo per evidenziare l'elemento è passato il mouse, si potrebbe provare qualcosa di simile: http://jsfiddle.net/2kyaJ/126/

Inoltre, se si sta semplicemente cercando di legare qualcosa per l'evento hover, piuttosto che il controllo più o meno ogni 0,2 secondi si potrebbe utilizzare la funzione .hover(): http://jsfiddle.net/2kyaJ/127/