Jquery 숨겨진 DIV 마우스 오버 툴팁

나는 이것을 아주 잘 조사했지만 아무것도 찾을 수 없었습니다. 직접 작성하는 것이 더 빠를 것입니다! 나는 'li'태그 안에 포함 된 내용을 가지고 있으며, li 안에는 사용자로부터 숨겨진 DIV가 있습니다. 나는 기본적으로 마우스를 특정 리로 움직이면 그 안에 포함 된 div가 커서가 리 위에있는 모든 시간 동안 마우스와 관련하여 튀어 나오고 움직이는 것을 찾고 있습니다. 누구든지 정확히 그 일을 할 수있는 것을 압니까?Jquery 숨겨진 DIV 마우스 오버 툴팁

출처

2010-12-22 Daniel

이 방법이 유용할까요? 그것은 구체적으로는 리튬의 마우스 오버에 DIV의 내용을 표시 할 시나리오를 처리하는 경우

http://flowplayer.org/tools/tooltip/index.html

는 잘 모르겠지만, 나는 그것이 HTML 콘텐츠를 표시 할 수 있습니다 알고 있습니다.

출처

2010-12-22 22:28:15

링크에 오류가 발생했습니다. – Vinoth

수정

귀하의 질문에 잘못 이해되었습니다. 이 페이지의 소스를 참조하십시오

HTML :

여기

http://www.lbstone.com/reference/jquery/follow_mouse.html

당신이

출처

2010-12-22 22:35:46 nunopolonia

빠른 답변을 보내 주신 모든 분들께 감사드립니다! 동적으로 CSS를 업데이트하기로 선택했습니다 : top : (e.pageY) + "px"등등 ... 그러나 DIV를 표시하는 것은 실제로 커서에서 멀리 떨어져 있습니다. 나는 친척 요소를 상대적인 위치에 두려고했지만 DIV가 맨 위 : 1000px +로 끝나고 머리를 둥글게 할 수없는 사람이 있습니까? – Daniel

페이지를 찾을 수 없습니다. – Vinoth

당신은 단지 jQuery를의 비트와 CSS와 함께이 작업을 수행 할 수 원하는 것을 그 코드를 찾을 수 있습니다 :

<ul> 
    <li> 
     <div>Content goes here</div> 
     <div class="tooltip">Tooltip!</div> 
    </li> 
    <li> 
     <div>More content!</div> 
     <div class="tooltip">Another tooltip!</div> 
    </li> 
</ul>

CSS :

.tooltip { 
    position:absolute; 
    display:none; 
    z-index:1000; 
    background-color:black; 
    color:white; 
    border: 1px solid black; 
}

자바 스크립트 :

$("li").bind("mousemove", function(event) { 
    $(this).find("div.tooltip").css({ 
     top: event.pageY + 5 + "px", 
     left: event.pageX + 5 + "px" 
    }).show(); 
}).bind("mouseout", function() { 
    $("div.tooltip").hide(); 
});

여기 무슨 일이 일어나고있는 작업은 다음과 같습니다

mousemove 이벤트에 대한 이벤트 처리기가리스트의 모든 항목에 대한 부착되어 있습니다.
find 메서드를 사용하여 이벤트가 발생한 li 아래에있는 tooltip 클래스의 div을 찾습니다.
top 및 left CSS 속성은 이벤트가 발생한 위치 (마우스의 현재 위치)와 div에 따라 설정됩니다.
mouseout 이벤트에 대한 다른 이벤트 핸들러가 첨부되어 표시되는 툴팁을 숨 깁니다.

정확한 HTML 구조를 반영하도록 선택기를 조정할 수 있습니다. 다음은 작동 예제입니다. http://jsfiddle.net/andrewwhitaker/tSHZS/

출처

2010-12-22 23:00:28

Jquery 숨겨진 DIV 마우스 오버 툴팁

답변

관련 문제