どのようにホバー上の要素を作ることができますか？

Question

私がやろうとしているすべては、このメカニズムのようなものである：ここでは

は、私がこれまで試したものです：

$(document).ready(function(){ 
 
    $('a').bind('mouseenter', function() { 
 
     var self = $(this); 
 
     this.iid = setInterval(function() { 
 
     \t 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); 
 
\t \t }).bind('mouseleave', function(){ 
 
    \t this.iid && clearInterval(this.iid); 
 
\t \t }); 
 
});

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を削除できます。

$(document).ready(function(){ 
 
    $('#test').bind('mouseenter', function() { 
 
     var self = $(this); 
 
     \t 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); 
 
\t \t }).bind('mouseleave', function(){ 
 
    \t $(this).children('.tag_info').remove(); 
 
\t \t }); 
 
});

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 id="test">tag1</a>

Answer 2

をDijが言ったように：

• を何をやっている：
  • のsetInterval - （すべての525msをあなたの関数を繰り返し）
• 何あなたが欲しい：
  • のsetTimeout - （525msの遅延の後に一度、あなたの関数を実行）

続きを読む：

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

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