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>

我认为这与图像滑块类似。我想要实现的是：在“用户2图像”上：悬停 - 设置“用户2文本”：显示可见（隐藏所有其他用户文本）。如果我将鼠标悬停在任何其他“用户图像”上，也是如此。我无法弄清楚如何匹配每个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 应用于“user”类，并使用 position：absolute 设置“user-text”类的位置。

或尝试：

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

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

3 个答案: