我試圖顯示光標附近的一個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 onclick div
- 2. jQuery的刪除的div的onclick
- 3. jQuery的添加新的div的onclick
- 4. 的jQuery的onclick DIV檢查複選框
- 5. jquery onclick hide/show div
- 6. jquery onclick加載div
- 7. 的jQuery的div的onclick點擊DIV中一個href
- 8. jquery:一個div的onclick - 得到下面的div的id
- 9. 如何刷新jQuery中的div onclick?
- 10. 加載一個不同的div onclick jquery
- 11. DIV的onClick在CSS
- 12. onClick addClass'active'slideDown overlay div,close overlay div onClick next div
- 13. Jquery長大/縮小Div onclick
- 14. jquery隱藏多個div onclick
- 15. Jquery - 動態DIV onclick綁定
- 16. jQuery onclick不隱藏div
- 17. jQuery綁定onclick到父div
- 18. jQuery顯示div加載onclick
- 19. jquery div onclick通話功能
- 20. 用同一div替換div onclick與jQuery
- 21. 的onClick沒有顯示DIV
- 22. div div onclick
- 23. 讓一個div的onclick彈出類似的fancybox的jQuery
- 24. 匹配div的使用onclick
- 25. 如何scrollLeft onclick div內的div
- 26. jQuery的:塊的onclick DIV操作時點擊裏面
- 27. jQuery/JavaScript的AJAX調用傳遞變量onClick的div
- 28. jQuery的onClick工作在div的約束由KnockoutJS
- 29. jQuery的onclick函數不會觸發嵌套的div
- 30. 如何使用jQuery獲得類的div的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