Html 在：悬停上显示外部div

我得到了这个菜单，我一直在工作，我想让一个外部div出现时，我鼠标越过a

我已经搜索了所有stackoverlow，但所有这些解决方案似乎都不适合我。我一定是做错了什么。如果能帮上忙，我将不胜感激

我的html

        <div id="hover1"></div>
        <div style="float: left; position: relative; left: 50%; margin-top: 237px;">
            <img src="img/octo_logo.png" class="logo" />
        </div>
        <!-- MENU start -->
        <div id="menu">
            <ul>
                <li><a href="bio.html"><span>BIO</span></a></li>
                <li><a href="equipa.html"><span>EQUIPA</span></a></li>
                <li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a></li>
                <li><a href="parceiros.html"><span>PARCEIROS</span></a></li>
                <li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a></li>
                <li><a href="contactos.html"><span>CONTACTOS</span></a></li>
            </ul>
        </div>

这是菜单的视图

我想要的结果是什么

---

编辑：我愿意使用jquery。

与上面的内容一起使用；一个简单的jQuery示例如下：

$('#menu a')
.on('mouseover', function (event) {
    $('#hover1').show();
})
.on('mouseout', function (event) {
    $('#hover1').hide();
});

编辑：

原因可能是DOM元素还没有准备好

尝试用以下代码包装上述代码：

$(function () {
    // above code here
});

或者如果这不起作用：

$(document).ready(function () {
    // above code here
});

---

实时预览（它是如何工作的）

签出并查看相应的示例。@jdegens我要显示的div既不是父级也不是子级。按照您的HTML结构方式。。。仅仅使用CSS是不可能的。答案显示了一个javascript示例，用于更改悬停元素旁边或包含在悬停元素中的元素。给出回答问题的代码很好，但最好解释它的功能以及如何解决问题。谢谢

$(document).ready(function () {
    // above code here
});

$(function() {
    // DOM ready

    $('#menu a').hover(
      function () {
          $('#hover1').show();
      }, 
      function () {
          $('#hover1').hide();
      });
});