Javascript 如何从上一个div中选择在父级中具有相同位置的元素

我认为它的工作原理类似于图像滑块。 我想要实现的是：在用户2上图像：悬停-设置用户2文本：显示可见隐藏所有其他用户文本。 如果我将鼠标悬停在任何其他用户图像上，情况也是如此。我不知道如何匹配每个分区的位置

欢迎一切帮助。多谢各位

如果这是重复的，请指出已解决的情况。

您可以使用：

<ul class="user-text">
  <li class="user-text">User 1 Text</li>
  <li class="user-text" style="display:none">User 2 text</li>
  <li class="user-text" style="display:none">User 3 text</li>
  <li class="user-text" style="display:none">User 4 text</li>
</ul>

<ul class="user">
  <li class="user">User 1 image</li>
  <li class="user">user 2 image</li>
  <li class="user">user 3 image</li>
  <li class="user">user 4 image</li>
</ul>

---

这应该是可行的，为什么不为滑块创建如下结构：

$(".user").hover(function(){
  $(".user-text").index($(this).index()).show();
});

---

如果您使用的是hover，则不需要回调，它会自动隐藏它。这正是我所想的。非常感谢。@zanu:很高兴这有帮助..别忘了接受帮助的答案..我已经尝试过了，但自己还没有找到解决方案。我需要显示所有用户图像，并且文本只针对悬停的用户：这不起作用。但我宁愿使用你的HTML版本Manish。似乎更正确。请看一下修改后的JSFIDLE代码：结果只能通过CSS实现，而不需要使用任何JS。我需要在这方面进一步添加一些不同的操作，并且不能仅使用CSS。然后您可以使用JavaScript实现所需的功能-

$(".user").hover(function(){
  $(".user-text").index($(this).index()).show();
});

<ul class="user">
            <li class="user">User 1 image
                <div class="user-text">User 1 image text</div>
            </li>
        </ul>

$('.user').on('mouseover', 'li', function () {
    $('.user-text').eq($(this).index()).show().siblings().hide();
});