select() and each() to add mouse event differ to ext 2.x

[ostghost]

i start to use ext-core-3.0-beta1
have some form labels but same error occures with other elements

purpose of code is on mouse over add and on mouse out remove class - border definition for element

for exeample 30 form inputs with labels

works ok

Ext.each( Ext.getBody().select('label').elements, function(el){
	x = Ext.get(el);
	x.on('mouseover', function(x){

		// gets element form event target
		x = Ext.get(x.getTarget());
		x.addClass('imageHrefOver');
        });
        x.on('mouseleave', function(x){
		x = Ext.get(x.getTarget());
		x.removeClass('imageHrefOver');
	});
});

but why next construction add / remove class only to the last element retrieved from Ext.getBody().select('label').elements

mouseover first fith label etc. but highlighted is always the last one.

Ext.each( Ext.getBody().select('label').elements, function(el){
	x = Ext.get(el);
	x.on('mouseover', function(){
		x.addClass('imageHrefOver');
        });
        x.on('mouseleave', function(){
		x.removeClass('imageHrefOver');
	});
});

thanks

[Animal]

Why not use Element.hover?

[ostghost]

animal thank you

your solution works like a sharm. why not - i was thinking old fashioned way and trying to simulate mouse over mouse out cause hover in my mind was paired as w3c said only on hrefs

so solution is

  Ext.select('.imageHref img').hover(function(evt, target){
        var elem = Ext.get(target).parent();
        elem.addClass('imageHrefOver');
    }, function(evt, target){
        var elem = Ext.get(target).parent();
        elem.removeClass('imageHrefOver');
    });