Css not changing using jQuery
<p>I have a ul with 2 li's in there, and a local map. if the user hovers on one of the li's the map lights up on of the regions, when the user hovers on one of the regions the corresponding li should light up.</p>

<p>It actually works, but it doesn't work for a 100%, the only one thing that changes is the padding, but the color doesn't change and the list style doesn't change.</p>

<pre><code>&lt;ul&gt;         
&lt;li id="selector1"&gt;&lt;a href="#"&gt;area 1&lt;/a&gt;&lt;/li&gt;
&lt;li id="selector2"&gt;&lt;a href="#"&gt;area 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


$(function() {
    $('#area-1').hover(function() {
        $('#selector-1').css({
            'list-style':'square',
            'padding':'.5em 0',
            'color':'#0a6480',
        });
    }, function() {
        // on mouseout, reset the color
        $('#selector-1').css({
            'list-style':'none',
            'padding':'.2em 0',
            'color':'#FFF'
        });
    });
});
</code></pre>