Javascript 悬停时上的DIV菜单

嘿，伙计们，这是我第一次在stackflow上发帖，但我以前用过别人的答案。真是一个伟大的网站

任何人都知道我的问题。我有一些“李”标签。当我将鼠标悬停在这些“li”上时，我需要一个DIV来显示在带有一些按钮的“li”上，等等。基本上这是一种菜单。“li”是一个不可预测的长度，通常在1到5行之间

我想介绍的一个很好的例子是dribble.com主页。将鼠标悬停在一张图片上，虽然我正在使用“li”，但出现了一个漂亮的lil信息

我完全没有使用javascript或jqry的经验，我只是一个使用CSS的PHP人。我做后端工作。任何人，谁能告诉我如何做这件事，并包括一个基本的例子请？我真的很感激

---

帮助？

创建一个.js文件并粘贴此代码

(function($) {
    $.fn.tooltip = function(options) {

        var 
          defaults = {
              background: '#e3e3e3',
              color: 'black',
              rounded: false
          },
          settings = $.extend({}, defaults, options);

        this.each(function() {
            var $this = $(this);
            var title = this.title;

            if ($this.is('a') && $this.attr('title') != '') {
                this.title = '';
                $this.hover(function(e) {
                    // mouse over
                    $('<div id="tooltip" />')
                      .appendTo('body')
                      .text(title)
                      .hide()
                      .css({
                          backgroundColor: settings.background,
                          color: settings.color,
                          top: e.pageY + 10,
                          left: e.pageX + 20
                      })
                      .fadeIn(350);

                    if (settings.rounded) {
                        $('#tooltip').addClass('rounded');
                    }
                }, function() {
                    // mouse out
                    $('#tooltip').remove();
                });
            }

            $this.mousemove(function(e) {
                $('#tooltip').css({
                    top: e.pageY + 10,
                    left: e.pageX + 20
                });
            });

        });
        // returns the jQuery object to allow for chainability.
        return this;
    }
})(jQuery);

这应该进入你的页面

<script src="../../Scripts/jQuery.tooltip.js" type="text/javascript"></script>

<style>
#tooltip {
    background: url(../images/search.png) no-repeat 5px 50%;
    border: 1px solid #BFBFBF;
    float: left;
    font-size: 12px;
    max-width: 160px;
    padding: 1em 1em 1em 3em;
    position: absolute;
}

.rounded {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

</style>

<script type="text/javascript">
    $('.tooltip').tooltip();    
</script> 

这是提供工具提示的链接

<a href="#" class="tooltip rounded" title="The other day, I bla bla with WordPress.">over the years</a>

现在，只要有类工具提示，就可以用任何需要的内容替换。然后你可以把按钮等放在里面

---

这不是完整的解决方案，但它应该让您非常接近。

假设您有以下结构：

<ul id="myMenu">
    <li><div class="inactive">Menu 1</div><div class="active">..some icons..</div></li>
    <li><div class="inactive">Menu 2</div><div class="active">..some icons..</div></li>
    <li><div class="inactive">Menu 3</div><div class="active">..some icons..</div></li>
</ul>

假设您使用的是jQuery，javascript将如下所示：

/* Initially hide rollover content */
#myMenu li div.active {
    display: none;
    /* Use the following if you want to overlay, otherwise delete */
    z-index: 2;
    position: absolute;
    top: 0px; left: 0px;
}

// DOM Ready
jQuery(function($) {
    // Reference to menu
    $("#myMenu").delegate("li", "mouseenter mouseleave", function(evt) {
        var $this = $(this);
        switch(evt.type) {
            // When the client mouses over
            case "mouseover":
                // To swap content use this
                $this.find(".inactive").hide(); // Remove this line to overlay
                $this.find(".active").show();
            break;
            // When the client mouses out
            case "mouseout":
                // To swap content use this
                $this.find(".inactive").show(); // Remove this line to overlay
                $this.find(".active").hide();
            break;
        }
    });
});

---

编辑：css和javascript中有一个输入错误，很抱歉，兄弟，谢谢。。我添加了代码，查看了代码，修改了代码，等等。当我打开实际页面时，我得到的都是这些年来的文本。悬停时不显示任何内容，单击时不显示任何内容。我知道你说这不是整个解决方案，我看了一下，试图在应该添加的地方添加内容，但正如我所说的，我对javascript没有经验。无论如何，谢谢你：首先看一下脚本标签。该路径需要指向您创建的文件，并且名称需要反映您为该文件指定的名称。我忘了这一点，您还需要添加另一个脚本引用，在我给您的加载文件jquery-1.3.2.min.js的脚本引用之上。我不知道你的路径，所以调整以反映这一点。Okaayy我在一个新页面上添加了脚本css和结构。我包括了Jquery文件。什么都不管用。就像我说的，我对这个很陌生。无论如何谢谢你的帮助：我已经纠正了一些小错误。祝你好运你可以在这里看到它的作用：