1

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

我有一个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>

将鼠标悬停在顶级菜单项之一上时，如何获得具有特定于悬停元素相关信息的附加弹出字段？

4

1 回答 1

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 和答案

于 2012-11-30T18:14:41.167 回答