Simple jquery request

JavaScript
1

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

<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

Something like this should do the trick:


a.hover {
    color: green;
}



$(function () {
    $('.detail').hover(function () {
        var context = $(this).parent();
        $('.detail_link', context).addClass('hover');
    }, function () {
        $('.detail_link', context).removeClass('hover');
    };
});
3

hi bongoman :slight_smile:

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

Something like this:


$('.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

I realised as I was posting so updated it to include the context as well, but your solution looks to be the cleaner one.