问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 jQuery 中根据鼠标滑动位置显示对应的隐藏元素？

头像
真是啥也不懂啊
    20212

    jQuery如何实现鼠标滑动展示隐藏相对应的元素
    想通过鼠标滑动到类名为“box-a-1”的元素时展示所对应的“box-b-1”的元素，代码如下

    <div>
    <div>
        <div class="box-a">
            <div class="box-a-1">2020s</div>
            <div class="box-a-1">2010s</div>
            <div class="box-a-1">2000s</div>
        </div>
        <div class="box-b">
            <div class="box-b-1">
                <a>2024</a>
                <a>2023</a>
            </div>
            <div class="box-b-1">
                <a>2019</a>
                <a>2018</a>
            </div>
            <div class="box-b-1">
                <a>2009</a>
                <a>2008</a>
            </div>
        </div>
    </div>
</div>

    效果如下
    image.png
    image.png

    用了css的hover去一一对应的做有些麻烦，请问大佬们可以通过jquery实现这种效果吗

    jquery前端javascripthtmlhtml5
    阅读 1.5k
    avatarAI BotBETA

    当然可以通过 jQuery 来实现这种效果。下面是一个使用 jQuery 的示例代码，它会监听 .box-a-1 元素的 mouseenter 事件，并在鼠标进入时显示对应的 .box-b-1 元素，同时在 mouseleave 事件时隐藏所有 .box-b-1 元素。

    由于 HTML 结构中 .box-a-1 和 .box-b-1 并没有直接的对应关系（例如，没有使用相同的索引或数据属性），我们需要假设它们按照相同的顺序排列，并且可以通过索引来匹配它们。

    $(document).ready(function() {
    // 监听 .box-a-1 的 mouseenter 事件
    $('.box-a-1').mouseenter(function() {
        // 获取当前 .box-a-1 的索引
        var index = $(this).index('.box-a-1');
        
        // 隐藏所有 .box-b-1 元素
        $('.box-b-1').hide();
        
        // 显示对应索引的 .box-b-1 元素
        $('.box-b .box-b-1').eq(index).show();
    });
    
    // 监听 .box-a-1 的 mouseleave 事件（可选，如果需要在鼠标离开时也隐藏所有 .box-b-1）
    $('.box-a-1').mouseleave(function() {
        $('.box-b-1').hide();
    });
    
    // 如果需要在页面加载时默认隐藏所有 .box-b-1，可以添加以下代码
    $('.box-b-1').hide();
});

    这段代码使用了 jQuery 的 .index() 方法来获取 .box-a-1 元素在其同级元素中的索引，然后使用 .eq() 方法来选择具有相同索引的 .box-b-1 元素。当鼠标进入 .box-a-1 元素时，它会显示对应的 .box-b-1 元素，并隐藏所有其他的 .box-b-1 元素。

    注意，如果 .box-a-1 和 .box-b-1 的数量不同，或者它们的顺序不一致，那么这种方法可能无法正常工作。在这种情况下，您可能需要使用其他方法来建立它们之间的对应关系，例如使用自定义的数据属性。

    2 个回答
    得票最新
    头像
    汝何不上九霄
      4.8k61947

      你可以使 mouseenter 和 mouseleave 来实现你的效果

      
$(selector).mouseenter(function(){
  // 鼠标移入时的处理逻辑
}).mouseleave(function(){
  // 鼠标移出时的处理逻辑
})
      头像
      小木爱旅行
        22536

        image.png

        <html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
    body {
      margin: 0;
    }

    .box {
      width: 200px;
      position: relative;
    }

    .box .box-a {
      width: 100%;
      position: relative;
    }

    .box .box-a .box-a-1 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #333;
      margin-bottom: 1px;
      color: #fff;
      padding-left: 0px;
    }

    .box .box-b {
      margin: 0;
    }

    .box .box-b .box-b-1 {
      position: absolute;
      top: 0;
      left: 200px;
      display: none;
    }

    .box .box-b .box-b-1 a {
      width: 100px;
      height: 40px;
      line-height: 40px;
      background: #999;
      margin-bottom: 1px;
      color: #fff;
      padding-left: 0px;
      display: block;

    }
  </style>
</head>


<body>

  <div>
    <div class="box">
      <div class="box-a">
        <div data-index="0" class="box-a-1">2020s</div>
        <div data-index="1" class="box-a-1">2010s</div>
        <div data-index="2" class="box-a-1">2000s</div>
      </div>
      <div class="box-b">
        <div class="box-b-1">
          <a>2024</a>
          <a>2023</a>
        </div>
        <div class="box-b-1">
          <a>2019</a>
          <a>2018</a>
        </div>
        <div class="box-b-1">
          <a>2009</a>
          <a>2008</a>
        </div>
      </div>
    </div>
  </div>


</body>
<script src="./jquery.js"></script>
<script>
  $(document).ready(function () {
    $('.box-a').on('mouseenter', '.box-a-1', function () { // 监听鼠标划入事件
      let index = $(this).attr('data-index');
      $('.box-b>.box-b-1').eq(index).css({top:41 * index + 'px'}).show().siblings().hide();
      $(this).css('background-color', '#F00');
    });
    $('.box-a').on('mouseleave', '.box-a-1', function () {  // 监听鼠标划出事件
      $('.box-b>.box-b-1').hide();
      $(this).css('background-color', '');
    });
  });
</script>

</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题