html - :hover function not opening popup

Question

我创建了一个基本的弹出窗口，当鼠标悬停在上面时会打开。但是，到目前为止我一直无法让它工作。下面是我打算创建的弹出窗口的 5 个部分之一。

#youtube-popup {
  display: none;
}

#youtube:hover + #youtube-popup {
  display: inline;
}

  <div class="messagepop pop">
    <div id="youtube-popup">
      <font size=5><b>Title</b>
    <br><font size=2>
  Text would go here.
    <br><font size=5><b>Title</b>
    <br><font size=2>More text would go here.
  </font></div>
  </div>

  <footer>
    <div id="footer"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-lg-offset-1 text-center">
          <br>
          <ul class="list-inline">
            <div class="hover">
              <img href="" id="youtube" src="https://www.youtube.com/yt/brand/media/image/YouTube-icon-dark.png" width="10%" height="10%" padding="1px 1px 1px 1px"></div>
            </li>
        </div>
        </li>
        </ul>
      </div>
    </div>
    </div>

谁能告诉我如何让它工作，当悬停在图标上时，文本应该出现在图标旁边？

另外，是否可以让文本一直保留到另一个图标悬停在上面？

谢谢

Answer 1

可能的解决方案如下所示:

document.getElementById('youtube').addEventListener("mouseover", function(event) {
   // set the display = "none" for all other popups
   // (not shown)

   // make the current popup visible
   document.getElementById('youtube-popup').style.display = "block";
}, false);