Как разрешить палку Div на курсор

Question

У меня есть скрипт, который показывает div на hover и привязывает его к курсору.

$(".picture_holder_thumb").mouseover(function() { 
    $(".title", this).show(); 
}); 

$(".picture_holder_thumb").mouseout(function() { 
    $(".title", this).hide(); 
}); 
$(document).bind('mousemove', function (e) { 
    $(".title", this).css({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
}); 

Это работает, но как-то там всегда очень много места между липким DIV и курсором.

Это мой CSS Div в:

#img-container .captioning .title { 
    width: auto; 
    height:auto; 
    position: absolute; 
    float:left; 
    z-index:1; 
    display: none; 
} 

Есть ли что-то не так с моей JS? Я благодарен за любую помощь!

Здесь вы можете увидеть, что жить с этой проблемой: http://www.cyrill-kuhlmann.de/index.php/projects

---

этого примера скрипку я получил JS от: http://jsfiddle.net/hj57k/

Answer 1

Вот хороший Чистый JavaScript и простой способ сделать DIV клюшку указателя курсора. Мы можем, а также удалить CSS, и сделать все стили с JavaScript по тому же пути:

document.addEventListener('mousemove', function(ev){ 
 
    document.getElementById('acab').style.transform = 'translateY('+(ev.clientY-80)+'px)'; 
 
    document.getElementById('acab').style.transform += 'translateX('+(ev.clientX-100)+'px)';    
 
},false);

#acab { 
 
transition: transform 0.23s; 
 
}

<div id="acab"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Anarchist_black_cat.svg/150px-Anarchist_black_cat.svg.png"></img> 
 
</div>

Answer 2

var mouseX = 0, 
 
    mouseY = 0; 
 

 
$(document).mousemove(function(e){ 
 
    mouseX = e.pageX; 
 
    mouseY = e.pageY; 
 
}); 
 

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

 
}, 30);

#follower{ 
 
    position: absolute; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="follower">mouse</div>

Answer 3

Попробуйте это (в соответствии со сценарием):

$(document).bind('mousemove', function(e){ 
    var width = $('#tail').width()/2; 
    $('#tail').css({ 
     left: e.pageX-width, 
     top: e.pageY 
    }); 
}); 

Answer 4

Просто еще одна кнопка «липкая кнопка».

var xp=0, yp = 0, rx, ry, loop, 
 
    mouseX = 0, 
 
    mouseY = 0, 
 
    t = $('#follower'); 
 

 
$(document).mousemove(function(e){ 
 
    mouseX = e.pageX; 
 
    mouseY = e.pageY; 
 
}); 
 

 
t.mousemove(function(){ 
 
    var parentOffset = $(this).offset(); 
 
    rx = (mouseX - (parentOffset.left))*2; 
 
    ry = (mouseY - (parentOffset.top))*2; 
 
    //console.log(rx+'.'+ry); 
 
}); 
 

 
t.mouseenter(function(){ 
 
    clearInterval(loop); 
 
    loop = setInterval(function(){ 
 
     xp += ((rx-50) - xp)/4-1; 
 
     yp += ((ry-50) - yp)/4-1; 
 
     t.css({left:xp, top:yp}); 
 
    }, 30); 
 
    
 
}); 
 

 
t.mouseout(function(e){ 
 
    clearInterval(loop); 
 
    loop = setInterval(function(){ 
 
     xp += (0 - xp)/3-1; 
 
     yp += (0 - yp)/3-1; 
 
     t.css({left:xp, top:yp}); 
 
    }, 30); 
 
    
 
});

#home{ 
 
    position: absolute; 
 
    width:50px; 
 
    height:50px; 
 
    top:100px; 
 
    left:100px; 
 
} 
 
#follower{ 
 
    position: absolute; 
 
    width:50px; 
 
    height:50px; 
 
    background:#777; 
 
    z-index:5; 
 
    cursor:pointer; 
 
    color: #fff; 
 
    background: #00b6f4; 
 
    border-radius: 6px; 
 
    border-bottom: 2px solid #009dd3; 
 
} 
 
#follower:hover{ 
 
-webkit-animation-name: shake-little; 
 
    -webkit-animation-duration: 100ms; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-delay: 0s; 
 
    -webkit-animation-play-state: running; 
 
} 
 

 
@-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 
 
    2% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    4% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    6% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    8% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    10% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    12% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    18% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    20% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    22% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    26% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    32% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    34% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    36% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    38% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    44% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    46% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    48% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    54% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    56% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    58% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    60% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    62% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    66% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    72% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    74% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    76% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    78% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    80% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    82% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); } 
 
    88% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    90% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    92% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
    94% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); } 
 
    96% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } 
 
    98% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="home"><div id="follower"></div></div>