multi-level of mouseover/mouseout not working
Hi,
I am trying to build this page where there are 3 levels of icons/contents. When user hovers on 1st level, they see the 2nd level. They now hovers on the second level and suppossed to get the 3rd levels of contents.
My 1st/2nd levels worked fine.
But when I added the 3rd level, could not make them to work.
Problems: 1. the 2nd levels show up with multiple 3rd level items - suppossed to be all hidden.
2. When I hover over the 2nd level - they are like frozen if the 3rd level is displayed. After hiding all the 3rd levels by doing mouseout - when I hover over a 2nd level, 3rd level shows up but when I move over to the next (2nd level), the corresponding 3rd level shows up without hiding the previous one. So again - displays multiple 3rd level items.
Any idea what I am doing wrong?
Here is part of my code:
- var cr_event = $('#imgCE');
- var info_center = $('#imgIC');
- var tab_events = $('#tabCreateEvent');
- var tab_infocenter = $('#tabInfoCenter');
- //
- if (tab_events.is(':visible'))
- {
- tab_events.hide();
- }
- if (tab_infocenter.is(':visible'))
- {
- tab_infocenter.hide();
- }
- cr_event.mouseenter(function(){
- if (tab_events.is(':visible'))
- {
- tab_events.hide();
- }
- if (tab_infocenter.is(':visible'))
- {
- tab_infocenter.hide();
- }
- if (tab_events.is(':hidden'))
- {
- tab_events.show();
- }
- })
- info_center.mouseenter(function(){
- if (tab_infocenter.is(':visible'))
- {
- tab_infocenter.hide();
- }
- if (tab_events.is(':visible'))
- {
- tab_events.hide();
- }
- if (tab_infocenter.is(':hidden'))
- {
- tab_infocenter.show();
- }
- })
- tab_events.mouseover(function(){
- tab_events.show();
- })
- tab_events.mouseout(function(){
- tab_events.hide();
- })
- tab_infocenter.mouseover(function(){
- tab_infocenter.show();
- })
- tab_infocenter.mouseout(function(){
- tab_infocenter.hide();
- })
- //--------------------------------------End Top Menu-------------------------------------------------
- var parent1 = $('#imgHead1');
- var parent2 = $('#imgHead2');
- var child1 = $('#divImgH1');
- var child2 = $('#divImgH2');
- var childs = $('div');
-
- childs.hide();
-
- parent1.mouseenter(function(){
- //hide all the childs
- if (childs.is(':visible'))
- {
- childs.hide();
- }
- child1.show();
- })
- parent2.mouseenter(function(){
- //hide all the childs
- if (childs.is(':visible'))
- {
- childs.hide();
- }
- child2.show();
- })
- child1.mouseover(function(){
- child1.show();
- })
- child1.mouseout(function(){
- child1.hide();
- })
- child2.mouseover(function(){
- child2.show();
- })
- child2.mouseout(function(){
- child2.hide();
- })
Thanks.