当鼠标进入/悬停在链接上时，隐藏DIV的所有同级，并显示特定的DIV

Question

I have separated buttons and DIV's representing each button. I need to show only the particular DIV when hover or mouse enter on it's corresponding button. The code is shown below,

  <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>

And the DIVs is below,

<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 -->

And I have 2 classes for DIVs to show and hide as 'showftr' and 'hidden'

The following code is not working. I need your help to get a result.

<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>

Answer 1

Here is my attempt, if I understood it correctly:

$('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');
});

Answer 2

You want something like that?

DEMO : http://jsfiddle.net/yeyene/Lyadfdgf/1/

Use the same button's id and div's class to be shown/hidden. You can get show/hide funtion with the jquery script alone.

JQUERY

$(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);
    });
});

HTML

<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 -->

Answer 3

Since you have a repeated structure, you can simplify your code by adding additional common classes to the elements

A class btn-ftr is added to all buttons where as a class ftr is added to all the div's.

 jQuery(function($) { var $contents = $('.ftr') $('.btn-ftr').hover(function() { var tid = this.id.replace('btn-', ''), $target = $('#' + tid); $contents.not($target).addClass('hidden'); $target.addClass('showftr').removeClass('hidden'); }, function() { $contents.filter('.hidden').removeClass('hidden'); var tid = this.id.replace('btn-', ''); $('#' + tid).removeClass('showftr'); }) }) 

  .hidden { display: none; } 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <ul class="icon-list"> <li><a href="#" id="btn-ftr-1" class="btn-ftr"><div class="circle"><i class="fa fa-user fa-3"></i></div></a></li> <li><a href="#" id="btn-ftr-2" class="btn-ftr"><div class="circle"><i class="fa fa-tasks fa-3"></i></div></a></li> </ul> <div class="row feature-content-original ftr" 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 ftr" 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 -->