Question

I am currently adding a interactive menu on my website that offers information on certain features on mouseover.
The individual list items expand/ collapse their information on mouseover/ mouseout but when hovering a list item it pushes the other items down causing them to cross your cursor which makes them expand and this can happen many times so it keeps bouncing between expanded and collapsed state many times.

If you fly your cursor over the list items a couple times you can force the error that I’m trying to fix.

I thought that there must be a way to prevent the unintentional expanding of certain list items. For example making it so that the currently expanded item has to collapse before another can open? But I don’t know how to express that in code language.

here is the element I am talking about: http://jsfiddle.net/JHLQv/3/

below is how I coded the expanding/ collapsing mechanism. The below code has information in it about the first 2 list items but I have it like this for each list item just so you know.

$("#li_bar_1").hover(
function() {
  $(div_expandable).animate({
    height: '+=130'
    }, 'slow'
  );
},
function() {
  $(div_expandable).animate({
    height: '-=130px'
    }, 'slow'
  );
}
);
$("#li_bar_2").hover(
function() {
  $(div_expandable_2).animate({
    height: '+=130'
    }, 'slow'
  );
},
function() {
  $(div_expandable_2).animate({
    height: '-=130px'
    }, 'slow'
  );
}
);

greetings

Answer 1

I guess you should use this plugin, Hover Intent, for preventing this behavior.