Question

I have two picture on which a DIV shows upon hovering, showing some user info. The looks of it is as intended, but I can’t figure how to only show the info on the hovered image.

How can I do this?

Here’s a live working example of the code:
http://jsfiddle.net/uvHw4/

Raw javascript code:

$(document).ready(function() {
    $('.start_profile_container_text').hide();
    $('.start_profile_container').mouseenter(function() {
        $('.start_profile_container_text').show('slide', { direction: "down"} ,'fast');
    });

    $('.start_profile_container').mouseout(function() {
        $('.start_profile_container_text').hide('slide', { direction: "down"} ,'fast');
    });

});

Answer 1

Change your script to this:

$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });

  $('.start_profile_container').mouseout(function () {
    $('.start_profile_container_text', this).hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

The difference to your code is simply adding a this to the show/hide function to relate to the actual element.