hide/show certain div according to links rel on hover
<p>got an easy question, using jquery, how do i create a menu, with links on the left and with content on the right, for example, if i hover the link with rel="link1", the content div on the right with id="link1" should be displayed, and when i hover another link with rel="link2", the content div with id="link2" will be displayed, BUT if i click one of the link, its content div should stay displayed, even if i hover another link :) i hope i was clear in explaining, here is my simple template to practice:</p>

<pre><code>&lt;div id="ref_menu"&gt;
    &lt;a href="javascript://" class="ref_link" rel="link1"&gt;
        Link 1
    &lt;/a&gt;
    &lt;a href="javascript://" class="ref_link" rel="link2"&gt;
        Link 2
    &lt;/a&gt;
&lt;/div&gt;
&lt;div id="ref_content"&gt;
    &lt;div class="ref_text" id="link1"&gt;
        text1
    &lt;/div&gt;
    &lt;div class="ref_text" id="link1"&gt;
        text2
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css styles:</p>

<pre><code>#ref_menu { width:250px; text-align:right; position:absolute; left:0; }
#ref_menu a { display:block; padding-right:10px; font-family:trebuchet ms; position:relative; font-style:italic; color:#0097c4; font-size:11pt; line-height:30px; letter-spacing:1px; border-bottom:1px solid #0097c4; }
#ref_menu a:hover { color:red; border-bottom:1px solid red; }
#ref_content { position:absolute; left:270px; }
#ref_content div { display:none; position:absolute; top:0; }
</code></pre>

<p>and biiiig thanks to those who can spare some time with helping me, i really apreciate it!</p>
