binding events and els (moofied)

[C.O.D.E.N.A.M.E]

window.addEvent('domready', function() {
$each($$('div.myElement a'), function(el) {
var original = el.getStyle('color');

var morph = new Fx.Morph(el,{ 'duration':'400', link:'cancel' });
el.addEvents({
'mouseenter' : function() { morph.start({ color':'#ccc' }) },
'mouseleave' : function() { morph.start({ 'color': original }) }
});
});



I would like to know how to activate the morph effect not only by hovering the anchor in the div with class myElement but also activate the morph when hovering the div where my anchor resides in, so I am not restricted to hovering the link but can extend this to the entire div.

Sort of:
<div class="myElement"><a href="#">activate morph></a></div>

[TinyScript]

window.addEvent('domready', function() {
$each($$('div.myElement'), function(el) {
var original = el.getStyle('color');

var morph = new Fx.Morph(el,{ 'duration':'400', link:'cancel' });
el.addEvents({
'mouseenter' : function() { morph.start({ color':'#ccc' }) },
'mouseleave' : function() { morph.start({ 'color': original }) }
});
});



wouldn't it just be the div itself then? I'm assuming $$ applying styling. Is $$ a selector-type or is that $?