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

Answer 2

您可以使用纯 CSS

要使其工作，您需要删除内联样式并在CSS中设置属性。

与inline styles中定义的样式相比，CSS具有更多特异性。

<强> HTML

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

<强> CSS

img{              // .pshow
    display: none;
}

a:hover + img {  // a:hover + .pshow
    display: block;
}

的 Check Demo

Answer 3

您需要更改选择器，以便只选择一个类pshow的元素。你可以这样做：

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

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

3 个答案:

的 Check Demo