JQuery - divs and styles

Question

Hi, I have menu:

    <div id="head_menu">
        <a href="#order"><div>make order</div></a>
        <a href="#portfolio"><div>portfolie</div></a>
        <a href="#contacts"><div>contacts</div></a>
        <a href="#vacancies"><div>vacancies</div></a>
        <a href="#about"><div>about company</div></a>
    </div>

I add style for it in jquery-script:

        $('#head_menu a').each(
            function()
            {
               $(this).addClass('menu_part'); 
            }
        )

And style menu_part

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu.png);
    float:left;
    padding: 2px 10px;
}

And now I want to change style if part of the menu clicked:

        $('#head_menu a').click(
            function(e)
            {
                $(this).removeClass('menu_part').addClass('menu_chose');
            });

menu_chose style:

 .menu_chose
    {
        background-image: url(../images/bg_menu_hover.png);                            
        color: #FFF;
    }

Everything is good, but after clicking only text-color changes to white, but background-image is still old, why?

---

upd

Images paths are right. Here is another style:

.menu_part:hover
{
    background-image: url(../images/bg_menu_hover.png);
    color: #FFF;
}

And it works greatly, when mouse is over.

Answer 1

First of all, this code:

    $('#head_menu a').each(
        function()
        {
           $(this).addClass('menu_part'); 
        }
    )

Can be simplified as:

    $('#head_menu a').addClass('menu_part');

Secondly, from the looks of it you are adding the class 'menu_choosed' in your click event handler, whilst your stylesheet actually has the style 'menu_chosed' (only one 'o'). If you change both to 'menu_chosen' the problem should hopefully disappear!