Jquery help

Discussion in 'Web Design and Development' started by andyjamesnelson, Jun 10, 2009.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hello,

    I'm totally new to Javascript and I'm trying to break into learning through using the Jquery library. This is the problem I'm having:

    What I want to do is recreate a roll over effect I saw here:

    http://www.formfiftyfive.com/


    So there are 4 of these in a list.

    html:

    <div class="content">
    <img src="../web-app/images/article-4.jpg" alt="" />
    <div class="overlay">
    <h1>Title of article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    <a href="#">More info</a>
    </div>
    </div>


    Here is my jquery

    $(document).ready (function() {
    $('.overlay').hide();
    $('.content').hover( function() {
    $('.overlay').show('fast');
    }, function() {
    $('.overlay').hide('fast');
    });
    });

    This does hide and show the overlay div on hover but its doing it to all 4 content blocks and not just the one thats being hovered over at that time.

    Can anyone help with this?

    Andy
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You may need to use an id rather than a class name so that it only effects one at a time.
     
  3. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #3
    +1

    using classes will affect EVERY element with that same class name.
    When using ids, each one has to be unique, so that will guarantee that only the element you want the effect to happen on will happen on that element.
     

Share This Page