Problema menu mouseover-out

[danieletdg]

Salve ragazzi .. vi spiego in breve il mio problema. il sito in questione è composto da 3 sezioni: header - menu - contenuti. Ho un menu semplice fatto in CSS solo testo .. senza immagini, ora, volevo un semplice mouseover e mouseout sul testo, in modo da colorare il rettangolo del[*], utilizzando jquery ho scritto questo:

$(document).ready(function(){
    
    
    $("li").mouseover(function () {
      $(this).css("color","#CCCCCC");
      });
   });

$(document).ready(function(){
 $("li").mouseout(function () {
      $(this).css("color","#FFFFFF");
      });
   });

tutto bene .. funziona benissimo .. ora pero' .. visto che i contenuti del sito sono in un iframe
vorrei che cliccando sul link il rettangolo del[*] si colorasse .. in modo da segnare sul menu la pagina in cui ti trovi.
Così sempre in jquery ho provato questo ..

$(document).ready(function(){

$("#aa1").click(function () {
      $("#a1").css("background-color","#FE0000");
      $("#a2").css("background-color","transparent");
      $("#a3").css("background-color","transparent");
      $("#a4").css("background-color","transparent");
      $("#a5").css("background-color","transparent");
      $("#a6").css("background-color","transparent");
     });
});

.....

ad ogni click cambio il colore del[*] in questione e diciamo "spengo" il resto (ovviamente il codice va ripetuto per ogni link). Il problema è che funziona .. ma c'è un evidente conflitto tra l' evento mouseout() e click(). Poichè l'ultimo evento a verificarisi è il mouseout, quindi il[*] torna spento. In pratica gli eventi che si verificano in seguenza sono .. mouseover .. click .. mouseout .. in teoria vorrei disattivare mouseout dopo un click() in modo da segnare la pagina. Spero di essermi spiegato .. vi ringrazio anticipatamente per l'aiuto e per la disponibilità .. ovviamente sono ben accette anche tecniche diverse .. conta solo il risultato

Saluti Daniele

[danieletdg]

Forse non mi sono spiegato bene nessuno ha una soluzione?

[Xinod]

cambia approccio:
considera una classe da assegnare all' elemento attivo

al click rimuovi la classe da qualsiasi elemento che possa averla
e poi settala su quello cliccato

al mouseover/out procedi solo se l' elemento non ha quella classe

[Xinod]

$(document).ready(function(){
	$('#menu li').click(function(){
		$('#menu li.classeClick').removeClass('classeClick');
		$(this).removeClass('classeOver').addClass('classeClick');
	}).mouseover(function(){
		if(!$(this).hasClass('classeClick')) $(this).addClass('classeOver');
	}).mouseout(function(){
		if(!$(this).hasClass('classeClick')) $(this).removeClass('classeOver');
	});
});

ciao