Question

Hi,

When the page first is rendered my div elements looks like this :

<div onmousedown="this.className='showhideExtra_down_click';"
   onmouseout="this.className='showhideExtra_down';"
   onmouseover="this.className='showhideExtra_down_hover';"
   class="showhideExtra_down" id="extraFilterDropDownButton">&nbsp;</div>

Then i manually updates the onmouse attributes with javascript so it looks like this :

<div onmousedown="this.className='showhideExtra_down_click';"
   onmouseout="this.className='showhideExtra_down';"
   onmouseover="this.className='showhideExtra_down_hover';"
   class="showhideExtra_down" id="extraFilterDropDownButton">&nbsp;</div>

They looks the same, the big difference is that the first one will change class when hovering and the second will not? Is it not possible to set this after page is rendered?

Please note : I need IE6 compability, thats why I use onmouse instead of CSS hover

BestRegards

Edit : This is what I found and that works grate, I haven´t tested it in IE6 just yet :

$("#extraFilterButton").hover(function() {
                $(this).attr('class','showhideExtra_down_hover');
            }, 
            function() {
                $(this).attr('class','showhideExtra_down');
            });

Answer 1

you can use:

$('#selector').live('mouseover',function(){//something todo when mouse over})

live() allows for dynamic changes

(you can do the same for ‘mouseout’)