Apply style on some event to each element of html with id accordian.

Question

Hi All.

I need to do something like below.

I have number of div with same id 'accordian'.

now onmouseover background of the div should change to #000000. and mouseout background of that div set to #FFFFFF.

I am using mootools1.2 .

Below is the code which i have used, but its not workig.

<script type="text/javascript" language="javascript">
window.addEvent('domready', function() {

    var accordian_divs = $$('#accordion');

    accordian_divs.addEvents({
                'mouseover':function(){
                    $(accordian_divs).setStyle('background-color', '#000000');
                },
                'mouseout':function(){
                    $(accordian_divs).setStyle('background-color', '#FFFFFF');
                }
            })  

});



</script>

Can any one please suggest whats the wrong with the code.

Thanks

Avinash

Answer 1

Except if you really need to use javascript for that, you can achieve the same result with CSS:

#accordion{background-color:#FFF}
#accordion:hover{background-color:#000}

Answer 2

erm - since the css solution wont work on div in ie6/7, here is how to do it in mootools:

add class accordion to the divs, remove the id as it needs to be unique.

use this:

window.addEvent('domready', function() {
    $$('div.accordion').addEvents({
        mouseenter: function() {
            this.setStyle('background-color', '#000000');
        },
        mouseleave: function() {
            this.setStyle('background-color', '#FFFFFF');
        }
    });
});