ограничение изменений при наведении на один 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()) собирает ток в первом делении каждый раз.

Попробуйте 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());
});

Answer 2

Когда вы вызываете $ ('. 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 искать только совпадающие элементы в родительском контейнере.