Jquery hide show specific div element on mouseover

Question

I am struggling a bit with this, I can hide/show/fadin/fadout all day long but I am trying to get my head round the logic of targetting an element in my and pulling its specific description on mouseover, I have come close to getting this but feel like im missing something, below is my HTML:

<ul id="menu" class="menu">
                        <li><a href="">Home</a></li>
                        <li id="menu1" class="menu-link"><a href="/">LINK1</a></li>
                        <li id="menu2" class="menu-link"><a href="/">LINK2</a></li>
                        <li id="menu3" class="menu-link"><a href="/">LINK3</a></li>
                        <li id="menu4" class="menu-link"><a href="/">LINK4</a></li>
                    </ul>
                    <div id="menu1content" class="menuDescription">
                        Description for "menu1"
                    </div>
                    <div id="menu2content" class="menuDescription">
                        Description for "menu2"
                    </div>
                    <div id="menu3content" class="menuDescription">
                        Description for "menu3"
                    </div>
                    <div id="menu4content" class="menuDescription">
                        Description for "menu4"
                    </div>

and here is my CSS, the idea is to position the description just above its corresponding

element btw:

.menu{
    font-family: 'LeagueGothicRegular';
    position: absolute;
    top:25px;
    overflow:hidden;
    right:100px;
    float:right;

}
.menu ul{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
.menu li{
    display:inline;
    clear:both;
    position:relative;
    overflow:hidden;
}
.menu li a{
    float:left;
    width:6em;
}

.menuDescription  {
    font-size: 11px;
    color: rgb(0, 0, 0);
    position: absolute;
    right: 407px;
    margin-left: 5px;
    top: 15px;
}

and finally here is the jquery:

$(document).ready(function() {
    $('div.menuDescription').hide();
    $('li.menu-link').bind('mouseover', function() {
        $('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
    })

            .mouseout(function() {
                $('#' + $(this).attr('id') + 'content').fadeOut();
            });

});

Upvotes: 1

Views: 10612

Answer 1

I have updated and simplified your fiddle to make it work: Working Fiddle. Here is the simplified code without any JS:

HTML:

<ul id="menu" class="menu">
  <li>
      <a href="">Home</a>
  </li>
  <li id="menu1" class="menu-link">
      <a href="/">LINK1</a>
      <div id="menu1content" class="menuDescription">
        Description for "menu1"
      </div>
  </li>
  <li id="menu2" class="menu-link">
      <a href="/">LINK2</a>
      <div id="menu2content" class="menuDescription">
         Description for "menu2"
      </div>
  </li>
  <li id="menu3" class="menu-link">
      <a href="/">LINK3</a>
      <div id="menu3content" class="menuDescription">
         Description for "menu3"
      </div>
    </li>
  <li id="menu4" class="menu-link">
      <a href="/">LINK4</a>
      <div id="menu4content" class="menuDescription">
         Description for "menu4"
      </div>
    </li>
</ul>

CSS:

.menu{
    font-family: 'LeagueGothicRegular';
    position: absolute;
    top:25px;
    overflow:hidden;
    right:100px;
    float:right;

}
.menu ul{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
.menu li{
    float:left;
    margin: 0 5px;
    position:relative;
    overflow:hidden;
    width: 120px;
    height: 30px;
}
.menu li a{
    position: absolute;
    bottom: 0;
}

.menu li .menuDescription {
    display: none;
}

.menu li:hover .menuDescription {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
}

.menuDescription  {
    font-size: 11px;
    color: rgb(0, 0, 0);
}

Let me know if you need any explanations and I'll edit my answer.

Answer 2

WHen you have a one-to-one relationship between 2 sets of elements and their order in each set matches, is generally easier to use indexing rather than parsing ID

var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
   /* "this" is element being hovered*/
   var index= $links.index(this);
   $content.stop().hide().eq(index).fadeIn(); 
},function(){
   /* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})

DEMO