SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    sydney
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple jquery request

    I'm new to jquery and have a page with a number of the following divs laid out in a grid:

    HTML Code:
    <div class='grid_2 actor'>
      <a class='detail' href='/actors/detail/44610'>
        <img alt='Baker' class='grid_pic' src='http://www3.mydomain.com/ActorPhotos/medium//3e/c4/91/35/3ec49135-3cbd-447f-bd9b-f20e75ea5e8e.jpg' />
      </a>
      <p class='actorname'>
        <a class='detail_link' href='/actors/detail/44610'>Joe Bloggs</a>
      </p>
    </div>
    I'm wanting to change the color of the text in a.detail_link when the user mouses over a.detail. That is, there's an image in a link and a caption underneath and I want the caption to change if the user rolls over the associated image.

    Hope this makes sense.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Something like this should do the trick:

    Code css:
    a.hover {
        color: green;
    }

    Code javascript:
    $(function () {
        $('.detail').hover(function () {
            var context = $(this).parent();
            $('.detail_link', context).addClass('hover');
        }, function () {
            $('.detail_link', context).removeClass('hover');
        };
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    hi bongoman

    The easiest way is to toggle a class name on the parent and then style with CSS:

    Something like this:
    Code javascript:
    $('.detail').hover(function(event) {
      $(this).closest('.actor').addClass('focus');
    }, function(event) {
      $(this).closest('.actor').removeClass('focus');
    });
    Paul's will work too if there's only one element with those class names.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Paul's will work too if there's only one element with those class names.
    I realised as I was posting so updated it to include the context as well, but your solution looks to be the cleaner one.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •