如何 select 来自先前 div 且在父级中具有相同位置的元素

Question

<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 2 image" 上：悬停——设置 "User 2 text"：显示可见（隐藏所有其他用户文本）。如果我将鼠标悬停在任何其他 "User image" 上，也是如此。我不知道如何匹配每个 div.

的位置

欢迎所有帮助。谢谢。

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

Answer 1

您可以使用：

$('li.user' ).hover(function(){
  $('li.user-text:eq('+$(this).index()+')').show().siblings().hide();
});

Working Demo

Answer 2

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

这应该有效

Answer 3

你为什么不为你的滑块创建这样的结构：

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

将 position: relative 应用到 class "user" 并使用 position: absolute 为 class "user-text".

或尝试：

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

如何 select 来自先前 div 且在父级中具有相同位置的元素

How to select elements from previous div that have the same position inside parent

html

javascript

css

jquery

match