jQuery 및 CSS 메뉴 도움말!

Question

화면 하단에 붙어있는 메뉴 모음을 만들려고합니다. 화면상의 위치 때문에 하이퍼 링크에 앵커 태그를 사용할 수 없기 때문에 Chrome에서 작은 링크 모음이 메뉴 하단에 오버레이로 표시됩니다.

이와 같이 각 메뉴 아이콘은 고유 한 ID (예 : "프로필")가있는 DIV이며 "메뉴 항목"클래스가 적용됩니다. 각 아이콘은 클릭 할 때 특정 페이지로 연결됩니다 (예 : 왜 onClick 자바 스크립트 이벤트를 사용하고 싶은지). 그러나 각 아이콘 위에 마우스를 올려 놓으면 위에있는 상황 별 툴팁 (또는 하위 메뉴)이 나타납니다. 이 툴팁에는 추가 옵션 또는 링크가 있습니다. 따라서, 나는 다음과 같은 HTML 구조와 함께 올라와있다 :

example image located here: http://i.stack.imgur.com/hZU2g.png 

각 메뉴 아이콘이 고유의 onclick 링크뿐만 아니라 고유의 하위 메뉴/툴팁 (다른 페이지에 연결을 더 가질 수 있음)해야합니다.

나는 각각의 하위 메뉴를 팝업으로 다음과 같은 jQuery를 사용하고 있습니다 :

$(".menu-item").hover(function() { 
    $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE 
}, 
function() { //hide tooltip when the mouse moves off of the element 
    $('#' + this.id + '-tip').hide(); 
} 
); 

커서가 현재를 (아이콘을 이동하고 하위 메뉴/도구 설명에 때 내가 볼 툴팁을 유지하고있다 데 문제 두 번째 아이콘이 더 이상 표시되지 않음). 툴팁/서브 메뉴의 모양에 jQuery 페이드 인과 페이드 아웃 효과를 적용하고 싶습니다.

의견, 제안, 코드 및 jsfiddle 예제는 크게 감사하겠습니다. 내가 어떤면에서 불투명하다면 더 명확하게 해피.

미리 감사드립니다.

Answer 1

은 당신과 같이 부모 div의 메뉴 항목 및 팁 링크를 포장해야합니다

<div class="item-wrapper" rel="profile"> 
    <div id="profile" class="menu-item"></div> 
    <div id="profile-tip" class="tip"> 
     <a href="link1.php">Link1</a> 
     <a href="link2.php">Link2</a> 
    </div> 
</div> 

그런 다음 .item-wrapper에 호버 기능을 적용하고 rel 속성 (또는 사용자가 선택한 다른 속성을) 참조 : 당신이 링크를 통해 마우스를 가져 가면

$(".item-wrapper").hover(function() { 
    $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE 
}, 
function() { //hide tooltip when the mouse moves off of the element 
    $('#' + $(this).attr("rel") + '-tip').hide(); 
}); 

이 방법 당신은 여전히 ​​.item-wrapper유혹한다

는 UPDATE :

당신의 후속 질문에 대답하기 위해, 당신은 setTimeout()를 사용해야합니다 : setTimeout()에

var item_wrapper = { 
    onHover: function($obj, delay) { 
     setTimeout(function() { 
      $('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE 
     }, delay); 
    }, 
    offHover: function($obj, delay) { 
     setTimeout(function() { 
      $('#' + $obj.attr("rel") + '-tip').hide(); 
     }, delay); 
    }, 
    initHover: function($obj, delay) { 
     $obj.hover(function() { 
      item_wrapper.onHover($(this), delay); 
     }, function() { 
      item_wrapper.offHover($(this), delay); 
     }); 
    } 
}; 

item_wrapper.initHover($(".item-wrapper"), 1000); 

두 번째 인수는 밀리 초 단위의 지연이다.