Javascript attivato "onMouseOver" per i bambini?

Question

Non posso dire se questo è il risultato del jQuery che sto usando, ma è quello che sto cercando di fare:

<div class="info" style="display: inline;" 
  onMouseOut="$(this).children('div').hide('normal');" 
  onMouseOver="$(this).children('div').show('normal');"
>
  <img src="images/target.png">
  <div class="tooltiptwo" id="tooltip" 
    style="font-weight: normal; font-size: 0.8em;" >TOOLTIP TEXT</div>
</div>

A chiunque abbia familiarità con CSS di base e jQuery, sto cercando di aggiungere una semplice animazione ai miei suggerimenti. Il problema è l'attivazione di una simile animazione. Sembra che quando si verifica l'animazione, se l'utente sposta il mouse sulla descrizione comandi, l'animazione andrà in un ciclo di mostrare e nascondere fino a quando l'utente sposta il mouse. Questo è un effetto indesiderato, poiché voglio che l'animazione scompaia una sola volta, quando il mouse esce dal div parent . Ho posizionato il mio CSS in modo che la descrizione comandi appaia lontana dal div genitore, ma indipendentemente dalle azioni dovrebbe essere innescata solo sul genitore e non su nessuno dei suoi figli.

Quindi, in sostanza, come potrei raggiungere questo obiettivo? Voglio che il mio stato hover / out sull'elemento genitore attivi una funzione (un'animazione) sui figli di quel genitore, senza che gli stati hover / out dei bambini facciano qualcosa. Sembra che il normale metodo di onMouseOver e onMouseOut si inneschi anche per i figli del genitore a cui appartiene il metodo, causando alcuni effetti piuttosto indesiderabili.

Nota che sono nuovo di jQuery (anche se finora è sorprendente, voglio rivestire il mio sito nella sua bontà se posso) e se c'è un modo migliore per raggiungere gli stati hover / out usando jQuery probabilmente non li conosco. ^ _ ^

Grazie

Answer 1

modifica : in realtà questa è una soluzione molto migliore ( credito ):

$('.info').bind('mouseenter', function() {
    $('div', this).show('normal');
});

$('.info').bind('mouseleave', function() {
    $('div', this).hide('normal');
});

// hide the tooltip to start off
$('.info div').hide();

modifica2 : in risposta ai commenti, penso che suggerirei di strutturare il tuo HTML in modo diverso allora, o di legare l'evento all'elemento fratello (l'immagine) invece:

<div class="info">
    <img src="stuff.jpg" />
</div>
<div class="tooltip"></div>

o vincolante sull'immagine:

$('.info img').bind('mouseenter', function() { etc... });
$('.info img').bind('mouseleave', function() { etc... });

Answer 2

Questo è un eccellente articolo sugli eventi del mouse: http://www.quirksmode.org/js/events_mouse.html

Answer 3

Hai seguito questo tutorial ?

Soprattutto la parte mousemove, dove imposta costantemente i valori di posizionamento a sinistra e in alto per allineare la descrizione comando accanto al cursore. le coordinate X e Y sono chiamate tramite .pageX e .pageY. E aggiunge anche un piccolo offset di 15 px in modo che la descrizione comandi non sia direttamente sotto il cursore.

In questo modo, il mouse non può essere sopra la descrizione comandi, nemmeno la fase di dissolvenza. Quindi nessun ciclo infinito

Answer 4

Associlo al div principale e usa stopPropagation per impedire che venga associato alla descrizione comando. In questo modo:

[code] $ ('. info'). bind ('mouseover', function (e) { e.stopPropagation ();     $ (this > 'div'). show ('normale'); });

$ ('. info'). bind ('mouseout', function () {     $ (this > 'div'). hide ('normal'); });

// nasconde la descrizione comandi per iniziare $ ('. info div'). hide (); [/ Code]

Tuttavia, anch'io uso pageX e pageY per spostare le mie descrizioni comandi con il cursore.