You could simplify this a lot (and make your link appearance/ 
disappearance happen) in one stroke.

CSS:
td.day.over {
        background-color:#ddd;
}

td.day span {
        display: none;
}

td.day.over span {
        display: inline;
}

JS:
var cells = $('calendar').select('td.day');
cells.invoke('observe','mouseover','addClassName','over');
cells.invoke('observe','mouseout','removeClassName','over');

Now, while this simplifies your code tremendously, realize that  
observing the mouseover event on an element that has children is  
fraught with peril. That's because the moment you mouse over one of  
those children, you issue a mouseout on the cell you were observing.

Microsoft has a proprietary event called mousenter/mouseleave which  
actually works the way most people think mouseover/out should work.  
The next version of Prototype will add that into all browsers, and all  
will be well with the world. For now, you have to change your strategy  
a bit.

var cells = $('calendar').select('td.day');
$('calendar').observe('mouseover',function(evt){
        var elm = evt.element();
        if (elm.hasClassName('over') || elm.up('td') &&  
elm.up('td').hasClassName('over')){
                evt.stop();
                return;
        }
        if(elm.tagName == 'TD'){
                cells.invoke('removeClassName','over');
                elm.addClassName('over');
        }
});

That's not fully tested, but it ought to work.

Walter

On May 9, 2009, at 7:55 AM, noddy wrote:

>
> I have the following code changing the cell background on mouse over/
> out.
>
>   1. document.observe('dom:loaded', function() {
>   2.       $$('#calendar td.day').each(function(item) {
>   3.           item.observe('mouseover', function() {
>   4.               item.setStyle({ backgroundColor: '#ddd' });
>   5.           });
>   6.           item.observe('mouseout', function() {
>   7.               item.setStyle({backgroundColor: '#fff' });
>   8.           });
>   9.       });
>  10.
>  11. });
>
> I now need to display a link in a <span> within the cell when the
> mouse is over the cell. How can this be done?
>
> Thanks.
>
> >


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to