悬停时 <li> 顶部的 DIV 菜单 [关闭]

Question

大家好，这是我第一次在 stackflow 上发帖，但我之前使用过人们的答案。真是一个很棒的网站。

任何人解决我的问题。我有一些'li'标签。当我将鼠标悬停在这些“li”上时，我需要一个带有一些按钮等的 DIV 出现在“li”上。基本上它是一种菜单。 'li's 是不可预测的长度，通常从 1 行到 5 行。

dribbble.com 主页就是我试图实现的一个很好的例子。将鼠标悬停在图像上（尽管我使用的是 'li's），然后会出现一个漂亮的 lil 信息。

我完全没有使用 javascript 或 jqry 的经验，我只是一个有一些 CSS 的 PHP 人。我做后端工作。任何人，任何人都可以告诉我如何做到这一点并包括一个基本的例子吗？真的很感激。

帮助？

Answer 1

假设你有以下结构：

<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>

这是一个非常基本的菜单，我相信你会有更复杂的东西，但是通过使用包装的 div，这将使你的结构设置更加容易。

你的 CSS 看起来像这样：

/* 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;
}

假设您使用的是 jQuery，则 javascript 看起来像这样：

// 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 中有错字，对不起兄弟

Answer 2

创建一个 .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>

现在，只要您有“工具提示”类，您就可以将<a> 替换为您想要的任何内容。然后你可以在里面放置按钮等。

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