在 a:hover 上显示 div 之外

Question

我得到了我一直在处理的这个菜单，我想在鼠标悬停在 a 上时显示外部 div。

我搜索了所有 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>

我的css:

#hover1{
    width: 155px;
    height: 650px;
    background-color: #57C194;
    float:left;
    position: absolute;
    display: none;
    }
#menu a:hover + #hover1{
    display: block;
    }

这是菜单视图http://i.imgur.com/2qqjBpo.png

而我想要的结果http://i.imgur.com/7DtXsDE.png

编辑：我愿意使用 jquery。

Answer 1

有了上面的内容；一个简单的 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
});

Answer 2

$(function() {
    // DOM ready

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

实时预览（工作原理）http://jsfiddle.net/e7bp0oz1/1/

在 a:hover 上显示 div 之外

Show OUTSIDE div on a:hover

html

css

show