2

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

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

我一直在搜索 stackoverflow 以寻找类似的问题，但我找不到任何东西。抱歉，如果这是重复的。这是正确的方法吗？

查询

<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>
4

3 回答 3

2

我会这样做...

放入class,div而不是H2

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

然后你的Jquery...

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

在这里演示

于 2013-08-10T20:56:15.940 回答
2

您可以为此使用纯CSS

为此，您需要删除内联样式并将属性设置为CSS.

As与. 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;
}

检查演示

于 2013-08-10T20:58:23.763 回答
0

您需要更改选择器以仅选择一个带有 class 的元素pshow。你可以这样做：

<script type="text/javascript"> 
$(document).ready(function () {
    $('.hover').mouseenter(function() {
         $(this).closest('div').find('img.pshow').toggle();
    });
});
</script>
于 2013-08-10T20:53:07.843 回答