jquery - 一次将悬停更改限制为一个 div

Question

我有三个无序列表，每个列表都被一个容器 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>

Answer 1

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());
});