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.
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 
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.
I realised as I was posting so updated it to include the context as well, but your solution looks to be the cleaner one.