视频干扰下拉？答案

【问题标题】：Video interferes with dropdown?视频干扰下拉？
【发布时间】：2009-11-18 03:28:17
【问题描述】：

当我将鼠标悬停在父链接上时，我试图打开一个下拉菜单，它可以工作，但当页面上有视频时，它似乎不起作用......我不是确定为什么。我尝试过使用 z-indexes，但似乎没有任何效果。子菜单项只是进进出出，但整个菜单并没有保持打开状态......下面是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 -->

【问题讨论】：

我认为你需要使用 IFrame。
村里的白痴可能是对的。此处讨论的选择控件也会发生同样的事情：stackoverflow.com/questions/552326/…

标签： jquery css video menu drop-down-menu

【解决方案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>

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：