在光标附近点击div的jQuery事件

Question

在光标附近点击div的jQuery事件

jqueryhtmlonclick

7

我正在尝试使用jQuery和CSS，在单击ID为"equipment"的span时，在光标附近显示一个div。

- Rickstar

3个回答

2

直到您提供更具体的信息，这是您的解决方案：

$("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始终靠近鼠标，您可以根据鼠标当前的x/y位置动态重新定位它：

$("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; }

- Sampson

2

"Another way could be like this" 的另一种方法可能是这样的。

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;
}

Working demo http://jsfiddle.net/a5Zxk/1/

- h0mayun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cletus · Accepted Answer

我建议添加一个隐藏的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>