当您在 jquery 和 css 中单击带有 id 作为设备的 span 时，我试图在光标附近显示一个 div
最佳答案
我建议添加一个隐藏的 div:
<div id="message">
This is a message
</div>
使用 CSS:
#message { position: absolute; display: none; }
然后显示它:
$("#equipment").click(function(evt) {
$("#message").css({
top: evt.pageY,
left: evt.pageX
}).toggle();
});
这是一个完整的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#equipment").click(function(evt) {
$("#message").css({
top: evt.pageY + 5,
left: evt.pageX + 5
}).show();
});
});
</script>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#wrapper { margin: 0 auto; width: 600px; }
#equipment { color: green; }
#message { display: none; position: absolute; text-align: center; padding: 10px; width: 120px; background: red; color: white; font-weight: bold; }
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <span id="equipment">incididunt ut labore et dolore</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="message">This is a message</div>
</div>
</body>
</html>
关于jquery - div 靠近光标 onclick jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1967531/