다른 div 내에서만 커서 이동을 따르는 jQuery div

div를 가질 수 있기를 원합니다. div 안에 마우스가있을 때 커서 옆에 작은 원형 마커가 나타납니다. 이 div 밖으로 이동하면 커서 표식이 제거되고 숨겨집니다.다른 div 내에서만 커서 이동을 따르는 jQuery div

나는 내가 원하는 무엇의 예를 발견하지만 난 필요가 정확히 무엇 : -

http://jsfiddle.net/3964w/3/

문제를 위로 : - 난 단지 노란색 마커가 그 안에 div 때 메신저를 표시 할 - 해당 div 외부의 im 일 때 마커가 숨겨져 커서가 정상입니다. - 마우스를 움직일 때 마커가 커서에서 너무 멀리 떨어져 있습니다.

아이디어가 있으십니까?

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15; 
$(window).mousemove(function(e){ 
mouseX = Math.min(e.pageX, limitX); 
mouseY = Math.min(e.pageY, limitY); 
}); 

// cache the selector 
var follower = $("#follower"); 
var xp = 0, yp = 0; 
var loop = setInterval(function(){ 
// change 12 to alter damping higher is slower 
xp += (mouseX - xp)/12; 
yp += (mouseY - yp)/12; 
follower.css({left:xp, top:yp}); 

}, 30);

감사

출처

2013-11-04 John

당신이 CSS를 사용할 수 있습니까? 이런 식으로 뭔가 : http://jsfiddle.net/felipemiosso/3964w/30/

그냥 #follower에 display:none;을 추가 커서가 정지 할 때, 고정 된 포인터를 얻을 #follower에 margin-left:-8px; margin-top:-8px;를 추가하려면 새로운 스타일 .centerdiv:hover #follower { display:block; }

를 만들었습니다.

업데이트 바이올린http://jsfiddle.net/felipemiosso/3964w/35/

당신이 뭔가를 할 다음 추종자의 CSS와에 display: none을 추가 할 수 있습니다 2http://jsfiddle.net/felipemiosso/3964w/41/

출처

2013-11-04 15:32:15

위대한 고마워요하지만 노란색 원을 포인터에 고정 얻을 수 있습니까 ?? 그 핫스팟 지역. – John

커서가 멈추거나 항상 고정 될 때 고정됩니까? –

ive는 그 문제를 분류했지만 피들과 코드를보고 있다고 생각합니다. 페이지에서 여러 영역을 원했고 각 div 컨테이너의 크기가 다른 경우 어떻게 작동합니까? var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15; div가 모두 다른 크기이고 페이지에 여러 개를 원하면 어떻게 될까요? – John

업데이트 바이올린 : http://jsfiddle.net/3964w/32/

$('.container').mousemove(function(e){ 
$("#follower").show(); 
    var offset = $('.container').offset(); 

    mouseX = Math.min(e.pageX - offset.left, limitX); 
    mouseY = Math.min(e.pageY - offset.top, limitY); 
    if (mouseX < 0) mouseX = 0; 
    if (mouseY < 0) mouseY = 0; 
}); 

$('.container').mouseleave(function() { 
     $("#follower").hide(); 
});

출처

2013-11-04 15:33:22 spacebean

위대한, 고마워하지만 포인터에 고정 된 노란색 원 얻을 수 있습니까 ?? 그 핫스팟 지역. – John

약간의 음수 여백을 추가하십시오. 'margin : -10px 0 0 -10px; 그리고 그렇게해야합니다 : http://jsfiddle.net/3964w/34/ – spacebean

문제가있는 30msec마다 호출되는 setInterval 함수 사용 t 그는 onmousemove 때 div에서 coordiantes를 얻을 수 있습니다. mouseenter에 팔로어를 보여주세요. mouseleave

출처

2013-11-04 15:33:32 Romko

변경 컨테이너 CSS 속성

.anyclass{ 
    cursor: URL("smallcircle.png"); 
}

출처

2013-11-04 15:46:58 sarath

당신이 라이브러리를 사용할 수 있습니다에 숨기기, 난 정말 훌륭하다고했습니다. http://www.tippedjs.com/

출처

2015-10-01 04:40:01

다른 div 내에서만 커서 이동을 따르는 jQuery div

답변

관련 문제