jQuery attribute doesn't change
<p>As I'm a newbie to jQuery I'm having a little problem. I have two divs with product images, below them I have a couple of "color selectors" to let the customer look at what colors that's available. When the user hovers one of the "links" I have a new div showing with a color in it. Bla bla... The problem I'm having is that it always picks the ID from the first "color_selector" even when I'm hovering a link in the second color_selector span.</p>

<p>Edit: I can't post more than one hyperlink in the text, so I've changed all the <code>&lt;a&gt;</code> tags to <code>&lt;hyperlink&gt;</code>.</p>

<pre><code>    &lt;div class="product_color" id="color_product01_content"&gt;&lt;/div&gt;
&lt;span class="color_selsector" id="color_product01"&gt;
    &lt;hyperlink href="javascript:void(0);" class="color_trigger" rel="000000"&gt;Product 01 color 01&lt;/hyperlink&gt;
    &lt;hyperlink href="javascript:void(0);" class="color_trigger" rel="efefef"&gt;Product 01 color 02&lt;/hyperlink&gt;
&lt;/span&gt;
&lt;div class="product_color" id="color_product02_content"&gt;&lt;/div&gt;
&lt;span class="color_selsector" id="color_product02"&gt;
    &lt;hyperlink href="javascript:void(0);" class="color_trigger" rel="000000"&gt;Product 02 color 01&lt;/hyperlink&gt;
    &lt;hyperlink href="javascript:void(0);" class="color_trigger" rel="efefef"&gt;Product 02 color 02&lt;/hyperlink&gt;
&lt;/span&gt;
</code></pre>

<p>And the jQuery:</p>

<pre><code>$('a.color_trigger').mouseover(function(){
    var contentPanelId = $(".color_selector").attr("id");
    var valueColor = jQuery(this).attr("rel");
    $("#" + contentPanelId + "_content").css({"background-color" : "#" + valueColor, "display" : "block"});
});
</code></pre>
