我试图显示光标附近的一个div当你在一个跨度的ID在jQuery和CSS的div的onclick jQuery的
5
A
回答
10
我建议增加一个隐藏的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>
1
单击以设备直到你提供更详细的信息,这里是你的解决方案:
$("span#equipment").click(function(){
$(".invisiDiv").show(); // .toggle() if you need it to close with next click
});
-
<p><span id="equipment">Equipment</span></p>
<div class="invisiDiv" style="display:none;">
<p>This div will be shown once you click on the span element above</p>
</div>
如果需要此.invisiDiv
在任何时候你的鼠标靠近的话,你可以动态地根据重新定位:
$("span#equipment").click(function(e){
$(".invisiDiv")
.css({top:e.pageX,left:e.pageY})
.show(); // .toggle() if you need it to close with next click
});
,并添加以下CSS规则吧:
.invisiDiv { position:absolute; width:100px; height:15px; }
2
另一种方式可以是这样的
HTML:
<span>click!</span>
的Jquery:
$('span').click(function()
{
$(this).showDiv('<div>I AM DIV</div>');
});
//plugin
jQuery.fn.showDiv = function (html)
{
var pos = $(this).position();
$(html).insertAfter('span').css({
position: "absolute",
top: (pos.top + 20) + "px",//customize top position
left: (pos.left) + "px"//customize left position
}).fadeIn();
return this;
}
一些CSS:
div{
background:red;
display:none;height:50px;width:50px
}
span{
position:absolute;
top:20px;
left:50px;
background:green;
}
相关问题
- 1. jQuery的添加新的div的onclick
- 2. jQuery的删除的div的onclick
- 3. 的jQuery的onclick DIV检查复选框
- 4. jquery onclick hide/show div
- 5. jquery onclick加载div
- 6. 的jQuery的div的onclick点击DIV中一个href
- 7. 如何刷新jQuery中的div onclick?
- 8. onClick addClass'active'slideDown overlay div,close overlay div onClick next div
- 9. DIV的onClick在CSS
- 10. jQuery绑定onclick到父div
- 11. Jquery - 动态DIV onclick绑定
- 12. jQuery显示div加载onclick
- 13. jquery div onclick通话功能
- 14. jQuery onclick不隐藏div
- 15. div div onclick
- 16. 让一个div的onclick弹出类似的fancybox的jQuery
- 17. 如何scrollLeft onclick div内的div
- 18. jQuery的隐藏DIV/<a>的onClick问题
- 19. 使用jquery更改嵌套内容的div的可见性,onclick
- 20. jQuery/JavaScript的AJAX调用传递变量onClick的div
- 21. onclick slideToggle + scrollTo DIV
- 22. jquery的datepicker值onclick
- 23. 使div'全屏'onClick?
- 24. 将onclick函数附加到div jquery
- 25. Jquery - Onclick将div插入到subdivs中
- 26. jQuery隐藏/显示div onclick范围
- 27. 使用jquery刷新div选项卡onclick?
- 28. 使用jQuery做一个onClick div刷新
- 29. 用Jquery在DIV中打开SWF onclick
- 30. Div出现onclick,消失onclick
什么都没有发生 – Rickstar 2009-12-28 01:03:04
那么这是一个100%的工作示例。 “什么都没有发生”是什么意思? – cletus 2009-12-28 01:05:01
所有作品greate。添加一些CSS和一些动画可以得到很好的结果 – AEMLoviji 2012-08-10 13:30:26