MENU: mouseover/out su 'li' e 'a'

[ffffgggg1977]

Ciao a tutti.
Ho questo menu:
http://onspa.altervista.org/menu_jquery.html

e con jquery ho associato al 'li' un contatore sia per il mouseover sia per il mouseout.

Se vado su "animali","piante","macchine","biciclette" nessun problema nel senso che che i contatori registrano correttamente gli eventi.

se però (partendo dal basso) vado su "Home" (il cui 'a' non è allineato rispetto al 'li') succede che:
- fino a quando resto sul 'a' jquery registra over:1 e out:0 (e questo è giusto)
- quando esco dal 'a' e vado sul 'li' contenitore vengono incrementati contemporaneamente entrambi i contatori

come è possibile???


Ovviamente stessa cosa se con il mouse parto dall'alto e vado verso il basso;

[Vincent.Zeno]

a parte che non capisco l'attinenza con html...

lo hai stablito tu il comportamento su "li"
e fa quel che hai dichiarato

[ffffgggg1977]

se sono over sul 'a' di Home significa che sono over anche sul 'li' di home, quindi perche quando passo dal 'a' al 'li' scattano i contatori???

[Vincent.Zeno]

capito...
si vede che legge due eventi: uno quando entri in li e uno quando entri in li>a,
lo stesso quando esci
del resto... sono due eventi


sposto in javascript

[cavicchiandrea]

E' come dice Vincenzo (Ciao vincent tutto bene?) prova cosi:

$(document).ready(function() {
var contatore_li_over =0;
var contatore_li_out =0;
$('#top_menu ul li').live({
mouseover: function() {
$('#li_mouseover').text('li OVER '+ ++contatore_li_over);
},
mouseleave: function() {
$('#li_mouseout').text('li OUT '+ ++contatore_li_out); 
}  
});
});

l'ho sintetizzato ma non testato

[Vincent.Zeno]

Originariamente inviato da cavicchiandrea
(Ciao vincent tutto bene?)

c'ho fame!

[cavicchiandrea]

Originariamente inviato da Vincent.Zeno
c'ho fame!

Organizziamo? Volendo possiamo sentirci su skype?

[ffffgggg1977]

Ciao grazie del contributo

ho notato che che invece del mouseout hai usato mouseleave, quindi ho ricaricato il mio codice con mouseenter/mouseleave invece di mouseover/mouseout:

http://onspa.altervista.org/menu_jquery.html

e funziona nel senso che che fin tanto che non hai abbandonato l'area del 'li' non scattano ulteriori contatori (anche se dal 'a' passi sul 'li')

Potresti darmi una spiegazione di questa differenza tra mouseenter/mouseleave e mouseover/mouseout?

[cavicchiandrea]

Premesso che non sono esperto di jquery le differenza fondamentale credo che sia:
mouseenter si scatena in entrata in un area (div tabelle) mouseleave idem in uscita dall'area mentre mouseover si scatena sui singoli elementi mouseout idem in uscita
se vuoi approfondire http://api.jquery.com/category/events/mouse-events/

[Vincent.Zeno]

magari lasciamo qualche traccia?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
	
				var contatore_li_over =0;
				var contatore_li_out =0;
				
				$('#top_menu ul li').mouseenter(function() {
				   $('#li_mouseover').text('li OVER '+ ++contatore_li_over);
				});
				
				$('#top_menu ul li').mouseleave(function() {
				$('#li_mouseout').text('li OUT '+ ++contatore_li_out);   
				});
	
	});
</script>

-------
<div id="top_menu">
<ul>
<li style="border:1px solid blue"><a style="top:8px;">home</a>[*]<a>animali</a>[*]<a>piante</a>[*]<a>macchine</a>[*]<a>biciclette</a>[/list]
</div>
 
<div id="li_mouseover"></div>
<div id="li_mouseout"></div>