Simple jquery request

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='' />
  <p class='actorname'>
    <a class='detail_link' href='/actors/detail/44610'>Joe Bloggs</a>

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.

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');

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) {
}, function(event) {

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.