如何在悬停时创建元素？

Question

我所要做的就是这种机制：

这是我到目前为止所尝试的内容：

$(document).ready(function(){
    $('a').bind('mouseenter', function() {
      var self = $(this);
      this.iid = setInterval(function() {
      	 var tag_name = self.text(),
             top      = self.position().top + self.outerHeight(true),
             left     = self.position().left;
         self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
         $(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);   
      }, 525);
		}).bind('mouseleave', function(){
    	this.iid && clearInterval(this.iid);
		});
});

body{
  padding: 20px;
}

a {
    color: #3e6d8e !important;
    background-color: #E1ECF4;
    padding: 2px 5px;
}
.tag_info{
  position: reletive;
  width: 130px;
  height: 30px;
  display:none;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>tag1</a>
<a>tag2</a>

如您所见，每次都会重复。如何在每次悬停时执行一次？为什么这个职位不适用？

我正在为这样的事做一个正确的算法吗？

谢谢。

Answer 1

我不确定你为什么使用setInterval，但我认为这应该有效。我删除了setInterval，每当mouseenter事件发生时，我们都可以附加<div class='tag_info'>，每次mouseleave事件发生时我们都可以删除附加的div。

＆＃13;

＆＃13;

$(document).ready(function(){
    $('#test').bind('mouseenter', function() {
      var self = $(this);
      	 var tag_name = self.text(),
             top      = self.position().top + self.outerHeight(true),
             left     = self.position().left;
         self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
         $(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);   
		}).bind('mouseleave', function(){
    	$(this).children('.tag_info').remove();
		});
});

＆＃13;

body{
  padding: 20px;
}

a {
    color: #3e6d8e !important;
    background-color: #E1ECF4;
    padding: 2px 5px;
}
.tag_info{
  position: reletive;
  width: 130px;
  height: 30px;
  display:none;
  background-color: black;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="test">tag1</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

像Pij一样说：

• 你在做什么：
  • setInterval - （每隔525ms重复一次功能）
• 你想要什么：
  • setTimeout - （在525ms延迟后执行一次功能）

了解详情：

setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp

setTimeout https://www.w3schools.com/jsref/met_win_settimeout.asp