title: hide/show certain div according to links rel on hover
body: <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>