jQuery Show/Hide by class when multiple items contain the said class

Question

Thanks in advance for helping me out (for those who have time and are willing).

I've written this script:

$(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;
  });
});

and put it onto this page http://www.fraservalley-webdesign.com/portfolio/test.php.

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.

Does anyone know a simple way to isolate the item I'm hovering over within the script?

Does this make sense?

Answer 1

The variable "this" is bound to the triggering element in the mouseover and mouseout handlers, so you can say something like

$('.foliobtn',this).hide();

to hide the elements with class "foliobtn" inside the triggering element.