Question

我有这样的结构。

<div id="ContentPlaceHolder2_div_Menu" class="bottom-link">
    <ul class='forlasttooltip'>
        <li>
            <div class='orange-button divm'>
                3G/GPRS</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='my.aspx' rel='#overlay'>How to configure GPRS?</a>
                        </li>
                        <li class='li' rel='#yesno'><a href='test.aspx' rel='#overlay'>How to Browse Internet?</a>
                        </li>
                        <li class='li' rel='#yesno'><a href='test1.aspx' rel='#overlay'>How to select 3G Network?</a></li></ul>
                </div>
            </div>
        </li>
        <li>
            <div class='orange-button divm'>
                Email</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='' rel='#overlay'>How To Configure Email?</a>
                        </li>
                        <li class='li' rel='#yesno'><a href='' rel='#overlay'>Exchange Mail Configuration</a></li></ul>
                </div>
            </div>
        </li>
        <li>
            <div class='orange-button divm'>
                MMS</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='' rel='#overlay'>How to Send MMS?</a></li></ul>
                </div>
            </div>
        </li>
        <li>
            <div class='orange-button-d divm'>
                Speed<br />
                Issue</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='tet.aspx'
                            rel='#overlay'>How to clear cache and cookies?</a></li></ul>
                </div>
            </div>
        </li>
    </ul>
</div>

当用户将鼠标悬停在div上并使用课程tooltip时，我想要使用课程div打开divm。这就像菜单在div上面打开一样之前我使用的tooltip flowplayer现在无法使用如下

enter image description here

感谢。

修改

我创建了一个fidle http://jsfiddle.net/c2pdG/28/

Answer 1

http://jsfiddle.net/c2pdG/23/

这更像是一个CSS问题。我更新了CSS以便它可以随意工作，但您可能需要进行更多调整 - 原始代码也无法正常工作。

基本上，包含子菜单的菜单项应包含position: relative和overflow: visible。然后，子菜单（工具提示）需要position: absolute和bottom: 100%，这将使其底部贴在其相对父级的顶部（即.bottom-link）。

即使动画正在使用.slideDown，它仍会显示为向上动画。

Answer 2

你可以像这样使用

$(".divm").mouseover(function(){

 var position = $(this).offset(); // calculate the position of click

 var winH = $(window).height();   

 var left = position.left;        // calculation bottom left position of tooltip to be displayed
 var bottom  = winH-position.top
$(".tooltip").attr("style","left:"+left+"px;bottom:"+bottom +"px;").show();

});

Answer 3

如果您可以控制源代码，我只需切换div的位置

<li>
        <div class='tooltip'>
            <div class='tooltipinner'>
                <ul>
                    <li class='li' rel='#yesno'><a href='my.aspx' rel='#overlay'>How to configure GPRS?</a>
                    </li>
                    <li class='li' rel='#yesno'><a href='test.aspx' rel='#overlay'>How to Browse Internet?</a>
                    </li>
                    <li class='li' rel='#yesno'><a href='test1.aspx' rel='#overlay'>How to select 3G Network?</a></li></ul>
            </div>
        </div>
        <div class='orange-button divm'>
            3G/GPRS</div>
    </li>

这将打开divm div上方的工具提示div。

如果没有，请尝试使用prependTo（）jQuery方法

$('.tooltip').prependTo($('.tooltip').parent());

这会将元素“移动”到它的父元素中的顶部元素，即li标记。

所以你的功能可能如下所示：

$(".divm").mouseover(function(){
    $('.tooltip').prependTo($('.tooltip').parent()).show();
}

jQuery在div上面打开一个隐藏的div

修改

3 个答案: