Question

当我将鼠标悬停在父链接上时，我正在尝试打开一个下拉菜单，它可以正常工作，但是当页面上有视频时，它似乎不起作用...我不是确定为什么。我试过玩z-index，但似乎没什么用。子菜单项只是闪烁进出，但整个菜单没有保持打开状态......下面是jquery代码，CSS，然后是html标记...不确定我做错了什么.. 。

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;



function plinks_open()
{  plinks_canceltimer();
  plinks_close();
  ddmenuitem = $j(this).find('ul').css('visibility', 'visible');}

function plinks_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function plinks_timer()
{  closetimer = window.setTimeout(plinks_close, timeout);}

function plinks_canceltimer()
{  if(closetimer)
    {  window.clearTimeout(closetimer);
      closetimer = null;}
}
$j('document').ready(function() 
{   
    $j('#plinks > li').bind('mouseover', plinks_open)
    $j('#plinks > li').bind('mouseout',  plinks_timer)
});

这是css：

#plinks
{   margin: 0;
    padding: 0
    background: #fff;
}

#plinks li
{   float: left;
    list-style: none;
    background: #fff;
}

#plinks li a
{   display: block;
    background: #fff;
    text-decoration: none;
    white-space: nowrap
}

#plinks li a:hover
{   background: #fff}

    #plinks li ul
    {   margin: 0;
        padding: 0;
        text-transform:lowercase;
        position: absolute;
        visibility: hidden;
        background: #fff;
        width: 400px;
        text-align:left;
        font-size: 14px;
        z-index: 9999;
    }

    #plinks li ul li
    {   float: none;
        display: inline;
        text-indent:5px;
    }


    #plinks li ul li a:hover
    {   background: #fff }

这是HTML标记：

<div id="primary-links">
    <ul id="plinks">
        <li><a href="/blog">home</a></li>
        <li><a href="/">portfolio</a></li>
        <li><a href="/blog/?page_id=2">about</a></li>
        <li><a href="/blog/?page_id=215">license</a></li>
        <li><a href="/blog/?page_id=217">links</a></li>
        <li><a href="/blog/categories.php">categories</a>
            <ul style="height:200px; display: block; background-color: #fff">
                <li>Sublink 1</li>
                <li>Sublink 2</li>
                <li>Sublink 3</li>
        </ul>
        </li>
        <li><a href="/blog/?page_id=356">archives</a></li>
        <li class="last"><a href="/blog/?page_id=219">connect</a></li>
    </ul>
</div><!-- /primary-links -->

Answer 1

我在早年遇到过这个问题。如果视频是基于Flash的，那么你将不得不做一些技巧来让它们显示出来。

特别是，Flash内容需要具有以下参数设置：

<param name="wmode" value="opaque" />

所以完整条目可能如下所示：

<object classid="..." width="100" height="200">
    <param name="movie" value="test.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />   <-- add this line.
    <embed  src="..."></embed>
</object>

希望这有帮助！

Answer 2

除了btelles响应，您还需要更改mouseleave事件的mouseout事件。当您绑定它时，菜单将保持足够长的时间以允许您从中选择一个项目。

视频干扰下拉？

2 个答案: