Javascript 当鼠标进入/悬停到链接并显示特定DIV时，隐藏DIV的所有sibling

我有单独的按钮和代表每个按钮的DIV。我只需要显示特定的DIV，当鼠标悬停或进入它的相应按钮。代码如下所示

  <ul class="icon-list">
    <li><a href="#" id="btn-ftr-5"><div class="circle"><i class="fa fa-user fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-4"><div class="circle"><i class="fa fa-tasks fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-3"><div class="circle"><i class="fa fa-gift fa-3"></i></div></a></li>
    <li><a href="#" id="btn-ftr-2"><div class="circle"><i class="fa fa-music fa-3"></i></div></a></li>
   </ul>

下面是div

<div class="row feature-content-original" id="ftr-1">
  <div class="col-md-5 feature-title" id="#title-ftr">
    <h2>Event Details</h2>
  </div>
  <div class="col-md-7 feature-info">
    <p>Welcome to your NuEvents Snapshot page.
       From your event management snapshot page, you can get a quick overview of al
      l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time.
       From your Snapshot page you can create a new task, memo, or appointment with ease.</p>
  </div>
</div>

<div class="row feature-content hidden" id="ftr-2">
  <div class="col-md-5 feature-title" id="#title-ftr">
      <h2>Food And Drinks</h2>
  </div>
  <div class="col-md-7 feature-info">
    <p>From your event management snapshot page, you can get a quick overview of al
   l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time.
    From your Snapshot page you can create a new task, memo,
    your RSVP/Food/Drink/Song activity in real time.
     From your Snapshot page you can create a new task, memor appointment with ease.</p>
  </div>
</div> <!--etc -->

活动详情
欢迎访问您的NuEvents快照页面。
从事件管理快照页面，您可以快速了解al
l你的活动统计数据。实时监控您的RSVP/食物/饮料/歌曲活动。
从快照页面，您可以轻松创建新任务、备忘录或约会

食物和饮料
从事件管理快照页面，您可以快速了解al
l你的活动统计数据。实时监控您的RSVP/食物/饮料/歌曲活动。
从快照页面，您可以创建一个新任务，即备忘录，
您的即时RSVP/食物/饮料/歌曲活动。
从快照页面，您可以轻松创建一个新任务，即备忘录约会

我有两个div类可以显示和隐藏为'showftr'和'hidden'

以下代码不起作用。我需要你的帮助才能得到结果

<script>
$(document).ready(function() {
 $('#btn-ftr-2').mouseenter(function() {
 $('#ftr-2').addClass('showftr');
}, function() {
 $('#ftr-2').removeClass('hidden');
}, function(){
 $('#ftr-2').sibilings().addClass('hidden');
}
});

});
</script>

$（文档）.ready（函数（）{
$（'#btn-ftr-2'）。鼠标指针（函数（）{
$（'ftr-2'）.addClass（'showftr'）；
}，函数（）{
$（'ftr-2'）.removeClass（'hidden'）；
}，函数（）{
$（'ftr-2'）.siblings（）.addClass（'hidden'）；
}
});
});

由于您有一个重复的结构，您可以通过向元素添加额外的公共类来简化代码

类

btn ftr

添加到所有按钮，其中类

ftr

添加到所有div

jQuery（函数（$）{
变量$contents=$（'.ftr'）
$（'.btn ftr'）.hover（函数（）{
var tid=this.id.replace（'btn-'，''），
$target=$（'#'+tid）；
$contents.not（$target.addClass（'hidden'）；
$target.addClass（'showftr'）.removeClass（'hidden'）；
}，函数（）{
$contents.filter（'.hidden'）.removeClass（'hidden'）；
var tid=this.id.replace（'btn-'，''）；
$（'#'+tid）.removeClass（'showftr'）；
})
})

。隐藏{
显示：无；
}

活动详情
欢迎访问您的NuEvents快照页面。
从事件管理快照页面，您可以快速了解al
l你的活动统计数据。实时监控您的RSVP/食物/饮料/歌曲活动。
从快照页面，您可以轻松创建新任务、备忘录或约会

食物和饮料
从事件管理快照页面，您可以快速了解al
l你的活动统计数据。实时监控您的RSVP/食物/饮料/歌曲活动。
从快照页面，您可以创建一个新任务，即备忘录，
您的即时RSVP/食物/饮料/歌曲活动。
从快照页面，您可以轻松创建一个新任务，即备忘录约会

如果我理解正确，以下是我的尝试：

$('a[id^=btn-ftr-]').hover(function() {
    var id = $(this).attr('id');
    id = id.substr(id.lastIndexOf('-') + 1, id.length);
    $('div[id^=ftr-]').removeClass('showftr').addClass('hidden');
    $('div[id=ftr-' + id + ']').removeClass('hidden').addClass('showftr');
}, function() {
    $('div[id^=ftr-]').removeClass('hidden').addClass('showftr');
});

---

你想要那样的吗

演示： 使用相同按钮的id和要显示/隐藏的div类。 仅使用jquery脚本就可以获得显示/隐藏功能

JQUERY HTML

活动详情
欢迎访问您的NuEvents快照页面。从事件管理快照页面，您可以快速了解所有事件统计信息。实时监控您的RSVP/食物/饮料/歌曲活动。从快照页面，您可以轻松创建新任务、备忘录或约会

我这里也有10个链接和10个分区ftr-2，我错了，没有在这里发布我的全部代码。对不起！你可以在html中添加一些额外的类，不是吗？我不明白。当鼠标进入link 2Side时，我试图隐藏DIV 2的所有嘶嘶声注意：为什么要将多个函数传递给

mouseenter

（它只需要一个处理函数）？谢谢您的回答。这会有帮助的。但问题是，西伯利亚人还没有被隐藏起来，他们现在应该被隐藏起来。请重试此代码。我只是修改了一些东西。是的，谢谢你的帮助！如果这个答案解决了你的问题，你能选择它作为正确的答案吗。我的方法完全错误。谢谢你的回答！我做了一点修改，不使用相同的ID，请使用div类（显示/隐藏）而不是ID。再次检查更新的演示。

$(document).ready(function () {
    $('.feature-content').hide(0);
    $('.feature-content').eq(0).show(0);

    $('.icon-list li a').on('mouseover', function () {
        $('.feature-content').hide(0);
        var get_id = $(this).attr('id');
        $('.feature-content.'+get_id).show(0);
    });
});

<ul class="icon-list">
    <li>
        <a href="#" id="div-ftr-5"><div class="circle"><i class="fa fa-user fa-3"></i> Event Detail</div></a>
    </li>
    <!-- ... -->
</ul>
<div class="row feature-content div-ftr-5">
    <div class="col-md-5 feature-title" id="#title-ftr">
         <h2>Event Details</h2>
    </div>
    <div class="col-md-7 feature-info">
        <p>Welcome to your NuEvents Snapshot page. From your event management snapshot page, you can get a quick overview of al l your event statistics. Monitor your RSVP/Food/Drink/Song activity in real time. From your Snapshot page you can create a new task, memo, or appointment with ease.</p>
    </div>
</div>
<!--etc -->