jQueryで5ちゃんねるの吹き出しのようなユーザービリティを実現したく奮闘しているのですが、結構調べたのですがどうすればいいかまったくわかりません。
画像で言えば >>729 にホバーしたときに吹き出しの要素がbodyにappendされているようでカーソルが要素から離れれば、removeで吹き出しは消えます。ここまでは普通に実装できるのですが、吹き出しにカーソルを移したときに吹き出しが消えないようにしたいときにflg(フラグ)で制御しようとしたのですが、他の要素にカーソルがあたると .number要素からはマウスが離れることになってしまい吹き出しは消えてしまいます。それが下記のコードです。
他の要素にカーソルが移ると、.number要素からカーソルが離れることになるので、flgはfalseにはならず、そのまま吹き出し要素も消えてしまいます。
5ちゃんねるの吹き出しようなユーザビリティーを実現したいです。ご教授のほどよろしくお願いします。
let flg
$('.number').hover(
function() {
let insertcontent = ''
$('body').append(insertcontent)
$('.fukidashi').hover(
function() {
flg = false
},
function() {
}
)
},
function() {
if (flg == true) {
$('.insertcontent').remove()
}
}
)