光标附近的div onclick jQuery_Jquery_Html_Onclick

光标附近的div onclick jQuery

jquery html

光标附近的div onclick jQuery,jquery,html,onclick,Jquery,Html,Onclick,当您在jquery和css中单击id为设备的跨度时，我试图在光标附近显示一个div，直到您提供更具体的信息，以下是您的解决方案： $("span#equipment").click(function(){ $(".invisiDiv").show(); // .toggle() if you need it to close with next click }); -- 并向其添加以下CSS规则： .invisiDiv { position:absolute; width:100px; h

当您在jquery和css中单击id为设备的跨度时，我试图在光标附近显示一个div，直到您提供更具体的信息，以下是您的解决方案：

$("span#equipment").click(function(){
  $(".invisiDiv").show(); // .toggle() if you need it to close with next click
});

并向其添加以下CSS规则：

.invisiDiv { position:absolute; width:100px; height:15px; }

我建议添加一个隐藏的div：

<div id="message">
This is a message
</div>

然后展示：

$("#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>


$（函数（）{
$（“#设备”）。单击（功能（evt）{
$（“#消息”）.css({
顶部：evt.pageY+5，
左：evt.pageX+5
}).show（）；
});
});
html，正文，div{margin:0；padding:0；border:0 none；}
#包装{边距：0自动；宽度：600px；}
#设备{颜色：绿色；}
#消息{显示：无；位置：绝对；文本对齐：居中；填充：10px；宽度：120px；背景：红色；颜色：白色；字体重量：粗体；}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
这是一条信息

另一种方法可能是这样的

HTML:

工作演示

这是一个100%工作的示例。“什么都没发生”到底是什么意思？所有的作品都很棒。添加一些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>

<span>click!</span>

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

div{
    background:red;
    display:none;height:50px;width:50px
}
span{
    position:absolute;
    top:20px;
    left:50px;
    background:green;
}