我的懸停彈出窗口在不應該出現的時候閃爍並移動

Question

嘗試創建一個懸停在元素上時將顯示的彈出窗口。 但是，當我在元素內移動鼠標時，它會閃爍並四處移動。 如果鼠標移到彈出窗口上，它也應該保持打開狀態。 嘗試在沒有jQuery之類的庫作弊的情況下執行此操作。 您不會學習是否使用它們。

如果將鼠標懸停在下面的標簽之一上，那正是我要創建的。

認為該錯誤在以下代碼中：

function showPopup(e) {
    var popup = document.getElementById('popup');
    if (popup.style.display == 'none') {
        popup.style.display = 'block';

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = e.target.getBoundingClientRect(),
    offsetX   = elemRect.left - bodyRect.left,
    offsetY   = elemRect.bottom - bodyRect.top;
        popup.style.left = offsetX + 'px';
        popup.style.top = offsetY + 'px';
        //console.log(e);
    }
}

function hidePopup(/*e*/) {
    setTimeout(function() {
        var popup = document.getElementById('popup');
        if (popup.style.display == 'block' && !window.inside_popup) {
            popup.style.display = 'none';
            window.inside_popup = false;
            console.log('hide');
        } else {
            setTimeout(hidePopup, 50); // try a little later
        }
    }, 50); // Give the events ability to catch up and tell us the mouse is inside the popup
}

var targ = document.querySelector('ul li')
    targ.addEventListener('mouseover', showPopup);
    targ.addEventListener('mouseout', hidePopup);

帶有真實測試元素的完整javascript代碼： https ： //jsfiddle.net/g8wvae8o/

Answer 1

作為@epascarello說， mouseleave和mouseenter是你在找什么。 這里也不需要setTimeout 。 另外，您要定位頁面上的每個li （這是故意的嗎？）我建議定位特定類別的元素以減少閃爍。

這很近，但是您需要按摩一下位置。

function createPopup() {
  var container = document.createElement('div');
  container.id = 'popup';
  container.style.width = '500px';
  container.style.height = '700px';
  container.style.display = 'none';
  container.style.position = 'absolute';
  container.style.borderRadius = '2px';
    container.style.border = '1px solid #242729';
    container.style.backgroundColor = '#535a60';
    container.style.color = '#e4e6e8';
    container.style.zIndex = '9999999';
  container.addEventListener('xmouseenter', function() {
    window.inside_popup = true;
    //console.log('window.inside_popup = true;');
  });
  container.addEventListener('xmouseleave', function() {
    window.inside_popup = false;
    //console.log('window.inside_popup = false;');
  });
  container.appendChild(document.createTextNode('This is a test'));
  (document.body || document.documentElement).appendChild(container);
}
window.inside_popup = false;
createPopup();


function showPopup(e) {
  var popup = document.getElementById('popup');
  if (popup.style.display == 'none') {
    popup.style.display = 'block';
  }
}

function hidePopup(/*e*/) {
  console.log('hiding')
  popup.style.display = 'none';
  window.inside_popup = false;
}

var bodyRect = document.body.getBoundingClientRect()
function updatePopup(e) {
  var elemRect = e.target.getBoundingClientRect(),
      offsetY   = elemRect.bottom - bodyRect.top,
      offsetX   = elemRect.left - bodyRect.left;
    popup.style.left = (e.clientX + offsetX) + 'px';
    popup.style.top = offsetY + 'px';
}

var targ = document.querySelector('ul li')
  targ.addEventListener('mouseenter', showPopup);
  targ.addEventListener('mouseleave', hidePopup);
  targ.addEventListener('mousemove', updatePopup)

小提琴

Answer 2

這是一個純CSS解決方案（我僅使用JS創建彈出元素）

 window.addEventListener("load", function () { var els = document.querySelectorAll("li"); els.forEach(el => { var popup = document.createElement("div"); popup.innerHTML = el.getAttribute("popup"); popup.className = "popup"; el.appendChild(popup); }); }); 

 *[popup]:hover > .popup { border: 1px solid #fff; padding: 0.5em; width: 400px; height: auto } .popup { overflow: hidden; box-sizing: border-box; background-color: black; color: #ccc; border-radius: 3px; position: absolute; height: 0px; } li { margin: 2em 0 } 

 <ul> <li popup="Some more info about this product">Move the mouse here</li> <li popup="Some more info about the 2nd product">Some other product</li> </ul> 

這樣做的關鍵是，彈出窗口是懸停元素的子元素，因此將鼠標移到彈出窗口上仍視為懸停元素。