Question

I currently have the the following HTML structure:

<div class="article-preview">
    <h1><a href="">Title</a></h1>
    <a class="pic-link" title="" href=""><img src="" /></a>
<div/>

When the image link or the heading link is hovered, I want to change the color/border-color of both.

I tried to use the next() filter:

$('.article-preview h1 a').mouseover(function(){
    $(this).animate({
        color: "#94c4c1"
    }, 10); 
    $(this).next('img').animate({
        borderTopColor: '#94c4c1',
        borderRightColor: '#94c4c1',
        borderBottomColor: '#94c4c1',
        borderLeftColor: '#94c4c1'
    }, 200);
});
$('.article-preview h1 a').mouseout(function(){
    $(this).animate({
        color: "#000000"
    }, 200);
    $(this).next('img').animate({
        borderTopColor: 'white',
        borderRightColor: 'white',
        borderBottomColor: 'white',
        borderLeftColor: 'white'
    }, 200);

});
$('.article-preview a img').mouseover(function(){
    $(this).animate({
        color: "#94c4c1"
    }, 10); 
    $(this).parent().find('a:first').animate({
        borderTopColor: '#94c4c1',
        borderRightColor: '#94c4c1',
        borderBottomColor: '#94c4c1',
        borderLeftColor: '#94c4c1'
    }, 200);
});
$('.article-preview h1 a').mouseout(function(){
    $(this).animate({
        color: "#000000"
    }, 200);
    $(this).parent().find('a:first').animate({
        borderTopColor: 'white',
        borderRightColor: 'white',
        borderBottomColor: 'white',
        borderLeftColor: 'white'
    }, 200);

});

This doesn’t work, because next only looks in the until the end of the heading. Is there a way to search for the next img element (from the selected element, in this case the <a> Tag), regardless of the placing in the DOM?

Answer 1

Try using

$('.article-preview h1 a').hover(function() {
    $(this).parent().next('a').find('img').animate({
        borderTopColor: 'yellow',
        borderRightColor: 'yellow',
        borderBottomColor: 'yellow',
        borderLeftColor: 'yellow'
    }, 200);
});