cambiare padding/font-style a un div con onmouseon

[markzzz]

salve, ho questo codice :

<div class="tllist" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'">
    div class="menureq1">
        testo 1
    </div
    
    div class="menureq2">
        testo 2
    </div    
</div>

.tllist{width:710px; float:left; border-bottom:1px #000000 solid;}
.menureq1{width:500px; float:left;}
.menureq2{width:210px; float:left; text-align:right; font-size:12px; padding-top:2px;}

vorrei che, oltre a cambiarmi il colore al div principale una volta sopra passatoci sopra con il mouse, JS manipolasse menureq2 in modo da rimuovere il padding e il font-size.

come posso fare? o a livello di prestazioni è meglio semplicemente cambiare classe? (magari un menureq2b identica ma senza font-size e padding).

inoltre, posso evitare Jquery quì giusto? mi sembra che i due eventi siano compatibili con tutti i browser. anche perchè con jquery dovrei creare una sorta di delegate per ogni div, e questo a livello di risorse credo sia più oneroso...

[markzzz]

in alternativa ho creato questo codice con jquery :

<script type="text/javascript">
	$(document).ready(function() {
		$(".content").delegate(".tllist", "mouseover", function(){
			$(this).css('background', '#CCCCCC');
			$(this).find(".menureq2").css('padding-top', '0px');
			$(this).find(".menureq2").css('font-size', '14px');
		});
		
		$(".content").delegate(".tllist", "mouseout", function(){
			$(this).css('background', '#FFFFFF');						
			$(this).find(".menureq2").css('padding-top', '2px');
			$(this).find(".menureq2").css('font-size', '12px');			
		});						
	});
</script>

a livello di performance secondo voi qual'è meglio?