作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我有一个脚本,它在悬停时显示一个 div 并将其粘贴到光标上。
$(".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 和 光标 之间总是有很大的空间。
这是我的 Div 的 CSS:
#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 的示例 fiddle :http://jsfiddle.net/hj57k/
最佳答案
这里有一个很好的纯 javascript 和简单的方法来使 div 粘在光标指针上。
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 {
position: fixed; /* Floating above */
transition: transform 0.23s; /* Sticking effect */
pointer-events: none; /* Allow clicking trough the div */
}
button {cursor: pointer}
<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>
<!-- A button, to test a mouse click -->
<button onclick="document.body.style.background=['red','green','grey','purple','magenta'][~~(Math.random()*5)]">Test click!</button>
关于javascript - 如何让 Div 粘在光标上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25934817/
查看此页面:http://jsbin.com/itufix使用 IE(页面自动启用 IE7 模式)。 在这里您将找到如何使用显示 block 呈现内联元素(输入和跨度)的示例。所有元素的边距和填充都设
我有一个自定义的 UITabvleViewCell,其中有一个 UIImageView。当在 cellForRowAtIndexPath 中设置单元格时,我可以很好地设置图像(尽管我没有),但是在某些
我是一名优秀的程序员,十分优秀!