Question

我试图在jquery和css中点击id作为设备的跨度时在光标附近显示div

Answer 1

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

Answer 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始终在鼠标附近说，您可以根据the current x/y position of the mouse动态重新定位它：

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

Answer 3

另一种方式可能是这样的

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

工作演示http://jsfiddle.net/a5Zxk/1/

div近光标onclick jQuery

3 个答案: