Question

嘿伙计们，这是我第一次真正在stackflow上发帖，但之前我曾经使用过人们的答案。真是一个很棒的网站。

Anywho on my problemo。我有一些'li'标签。当我将鼠标悬停在这些'li'上时，我需要一个DIV以一些按钮等显示在'li'上。基本上它是一种菜单。 'li'是一个不可预测的长度，通常在1行到5之间。

我正在努力的一个很好的例子是dribbble.com主页。将鼠标悬停在图像上（虽然我正在使用'li'）并且会出现一个漂亮的信息。

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

帮助？

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>替换为您想要的任何内容。然后你可以在里面放置按钮等。

这不是整个解决方案，但它应该让你非常接近。

悬停<li>上的DIV菜单</li>

2 个答案: