title: jQuery Show/Hide by class when multiple items contain the said class
body: <p>Thanks in advance for helping me out (for those who have time and are willing).  </p>
  
  <p>I've written this script:</p>
  
  <pre><code>$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    // (a little sooner than page load)
    $('.foliobtn').hide();
    $('.folionamedate').show();
  
    // shows the slickbox on clicking the noted link
    $('.foliobottom').mouseover(function() {
      $('.foliobtn').show();
      return false;
    });
    $('.foliobottom').mouseout(function() {
      $('.foliobtn').hide();
      return false;
    });
    $('.foliobottom').mouseover(function() {
      $('.folionamedate').hide();
      return false;
    });
    $('.foliobottom').mouseout(function() {
      $('.folionamedate').show();
      return false;
    });
  });
  </code></pre>
  
  <p>and put it onto this page <a href="http://www.fraservalley-webdesign.com/portfolio/test.php" rel="noreferrer">http://www.fraservalley-webdesign.com/portfolio/test.php</a>.</p>
  
  <p>It works except it of course shows/hides on every element with the appropriate classes, not just the one I'm hovering over.  I can't uniquely name each one as there will be dozens and it will be database driven content.</p>
  
  <p>Does anyone know a simple way to isolate the item I'm hovering over within the script?</p>
  
  <p>Does this make sense?</p>