jQuery - 获取下一个元素,无论DOM放置

Question

我目前有以下HTML结构:

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

当图像链接或标题链接悬停时,我想要更改两者的颜色/边框颜色.

我试着使用next()过滤器:

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

});

这不起作用,因为next只查看标题的结尾.有没有办法搜索下一个img元素(来自所选元素,在本例中为<a>Tag),无论在DOM中放置什么？

Answer 1

尝试使用

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