отделение около курсора onclick jQuery

Question

отделение около курсора onclick jQuery

Я пытаюсь показать отделение около курсора, когда Вы нажимаете на промежуток с идентификатором как оборудование в jQuery и CSS

7

jquery html onclick

задан Michael Easter 4 August 2011 в 03:37

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

2

ответ дан 6 December 2019 в 12:51

Другие вопросы по тегам:

jquery html onclick

Похожие вопросы:

score 12 · 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>