Jquery 将悬停时的更改限制为一次一个div

我有三个无序列表，每个列表都由一个容器div包围（下面显示了一个示例，对于所有三个div几乎相同）。每个列表都是一个链接，一旦用户将鼠标悬停在链接上，段落中的文本就会发生变化。我已经设法做到了，但在悬停时，三个div的所有更改的段落文本。我知道为什么会发生这种情况，但不知道如何修改我的代码

div ul li span {
    display: none;
}


$(document).ready(function () {
    $("div ul li a").hover(function() {  
        $(this).parent().addClass('current').siblings().removeClass('current');
        $('.highlight').html($('.current a span').html());
    }); 
});    

<div> 
    <ul>
        <li><a href="#"><img src="images/test-1.gif" alt="#"></img><span>Test</span></a></li>
        <li><a href="#"><img src="images/test-2.gif" alt="#"></img><span>Testing</span></a></li>
        <li><a href="#"><img src="images/test-3.gif" alt="#"></img><span>More Testing!!!</span></a></li>
        <li class="last"><a href="#"><img src="images/test-4.gif" alt="#"></img><span>Even More More Testing!!!</span></a></li>
    </ul>
    <p class="highlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eros tortor.</p>
</div>

div ul li span{
显示：无；
}
$（文档）.ready（函数（）{
$（“div ul li a”）.hover（函数（）{
$（this）.parent（）.addClass（'current'）.sides（）.removeClass（'current'）；
$（'.highlight'）.html（$（'.current a span'）.html（））；
}); 
});    






Lorem ipsum Door sit amet，是一位杰出的职业运动员。《厄洛斯·托托》中的菲瑟勒斯

调用$（'.highlight'）时，jQuery将返回整个文档中具有该类名的所有元素。你应该这样称呼它：

$(document).ready(function () {
    $("div ul li a").hover(function() {  
        var that = $(this),
            li = that.parent(),
            ul = li.parent();
        parent.addClass('current').siblings().removeClass('current');
        $('.highlight', li).html($('.current a span', ul).html());
    }); 
});   

注意下面代码块中的第二个参数'li'

$('.highlight', li)

这告诉jQuery只在父容器中查找匹配的元素。

html（$（'.current a span'）.html（））每次都在第一个div中提取.current

请尝试

html（$（this）.find（'span'）.html（））

$("div ul li a").hover(function() {
    $(this).parent().addClass('current').siblings().removeClass('current');
    $(this).closest("div").find('.highlight').html($(this).find('span').html());
});

---

谢谢，但是上面的代码不起作用。不断地出错。