jQuery - 悬停在另一个元素上时需要切换一个元素

Question

我正在学习 jquery，这几天我一直在努力解决这个问题。我正在尝试创建一个页面，其中包含一张大的特色图像和其下方的 4 个小缩略图。当用户将鼠标悬停在缩略图上时，我需要更改特色图像。

我很难表达当鼠标悬停在 A 上时，切换 B。但是当鼠标悬停在 C 上时，然后切换 D。当前发生的情况是所有 pshow 类同时切换。我应该使用 $(this) 来切换当前元素吗？我应该使用变量吗？

我一直在 stackoverflow 上搜索类似的问题，但没有找到任何内容。抱歉，如果这是重复的。这是正确的方法吗？

JQUERY

<script type="text/javascript"> 
    $(document).ready(function () {
        $('.hover').mouseenter(function() {
        $('.pshow').toggle();
        });
    });
</script>

HTML

<div id="story1">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>


<div id="story2">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>


<div id="story3">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>

Answer 1

我会这样做......

将class放入div，而不是H2

<div class="hover"  id="story1">

然后你的 Jquery...

 $('.hover').mouseenter(function() {
     $('.pshow').hide();
    $(this).find('.pshow').toggle();
    });

DEMO HERE