html - 将鼠标悬停在弹出式导航菜单上，并根据鼠标悬停在菜单中的哪个元素上进行单独的弹出式显示？

Question

我在一个网站上工作，该网站具有完全按照我想要的方式工作的悬停弹出式导航菜单。除了菜单之外，我想要的是在页面的其他地方有另一个弹出窗口，其中包含有关用户当前悬停的元素的特定信息。如果导航菜单中没有任何元素悬停，我希望隐藏弹出窗口。

我有一个 jsFiddle 除了额外的弹出字段外，它拥有我想要的一切。

除了 JavaScript 解决方案(因为我不精通 JS)之外，我已经尝试了所有我能想到的方法，但是，我不介意 JS 解决方案。我可以通过 JS 摸索并偶尔进行更改 - 我就是无法创建它。

这个悬停弹出菜单有效( jsFiddle 中的完整 HTML 和 CSS):

<ul>
    <li>Nav menu here
        <ul>
            <li>Sub menu items</li>
        </ul>
    </li>
    <li>More nav menu items</li>
</ul>

当悬停在某个顶级菜单项上时，如何获得包含特定悬停元素相关信息的附加弹出字段？

Answer 1

您可以从这里开始。 您可以使用 JavaScript 隐藏和取消隐藏信息。

检查这个 JSFiddle:http://jsfiddle.net/apD26/17/

示例 JS:

    $(document).ready(function(){
        $('.info').hide();
        $('.parent').mouseover(function(){
            $('.info').show();
            $('.info').text($(this).attr('data-desc'));
        });  
        $('.parent').mouseout(function(){
            $('.info').hide();
        });        
    });

代替我用来显示文本的 $(this).text()，您可以将描述存储在每个菜单项的 data 属性中，并且显示那个。

编辑

更新了 JSFiddle 和答案