Question

我正在使用这个CSS脚本来创建工具提示弹出气泡。 http://trentrichardson.com/examples/csstooltips/

我的工作正常，但它被以下div中的嵌入式iframe视频隐藏。

当我将鼠标悬停在“头号”上时，您可以看到它隐藏在视频背后。但是，当我将鼠标悬停在“十一号”上时，它会在图像前方正确显示。

我已尝试更改z-index值，但没有更改。

感谢您的帮助

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title> ToolTip</title>

<style type="text/css">

* { padding: 0; margin: 0; }




#wrapper {
            position: relative;
            margin: 0 auto;
            width: 980px;
            height: 550px;
            }

#main {
            width:980px;
            height:50px;

            }

#main ul {
            margin:0;
            padding:0;
            list-style:none;



}

#main ul li {
            list-style:none;
            display:inline;


            }


#video {
            width:620px;
            height:500px;
            float:left;

            }

#img {
            width:360px;
            height:500px;
            float:right;

        }



/* TOOLTIP HOOVER */

a.tt {
            position:relative;
            z-index:24;
            color:#3CA3FF;
            font-weight:normal;
            text-decoration:none;
            }

a.tt span { 
            display: none; 
            }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover { 
            z-index:25; 
            color: #aaaaff; 
            background:;
            }

a.tt:hover span.tooltip {
            display:block;
            position:absolute;
            top:2px; left:0;
            padding: 15px 0 0 0;
            width:200px;
            color: #111;
            text-align: center;
            filter: alpha(opacity:80);
            KHTMLOpacity: 0.80;
            MozOpacity: 0.80;
            opacity: 0.80;
            }

a.tt:hover span.top {
            display: block;
            padding: 30px 8px 0;
            background: url(bubble.gif) no-repeat top;
            }

a.tt:hover span.middle { /* different middle bg for stretch */
            display: block;
            padding: 0 8px; 
            background: url(bubble_filler.gif) repeat bottom; 
            }

a.tt:hover span.bottom {
            display: block;
            padding:3px 8px 10px;
            color: #548912;
            background: url(bubble.gif) no-repeat bottom;
            }

            /* end TOOLTIP HOOVER */


</style>

</head>

<body>

<div id="wrapper">

<div id="main">




<ul>


    <li>
    <a href="#" class="tt">Number One
    <span class="tooltip">
    <span class="top">
    </span>
    <span class="middle"> 
    Avoid cross-browser javascript when you can use css to make tooltips with     less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
    </span>
    <span class="bottom">
    </span>
    </span>

    </a>
    </li>




    <li><a href="#">Number Two</a></li>
    <li><a href="#">Number Three</a></li>
    <li><a href="#">Number Four</a></li>
    <li><a href="#">Number Five</a></li>
    <li><a href="#">Number Six</a></li>
    <li><a href="#">Number Seven</a></li>
    <li><a href="#">Number Eight</a></li>
    <li><a href="#">Number Nine</a></li>
    <li><a href="#">Number Ten</a></li>

        <li>
    <a href="#" class="tt">Number Eleven
    <span class="tooltip">
    <span class="top">
    </span>
    <span class="middle"> 
    Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
    </span>
    <span class="bottom">
    </span>
    </span>

    </a>
    </li>




</ul>






</div>


<div id="video">

<iframe width="601" height="353" src="https://www.youtube.com/embed    /oao0H5dfyEQ?rel=0"     frameborder="0" allowfullscreen></iframe>



</div>

<div id="img">

<img src="http://i.imgur.com/P0ken.jpg" />

</div>




</div>

</body>
</html>

Answer 1

我认为iframe将会推出一个Flash播放器。您需要将wmode = opaque传递给播放器http://kb2.adobe.com/cps/127/tn_12701.html，并且由于您无法控制iframe，因此无法以您需要的方式使用它。

使用wmode设置的旧版嵌入式代码是。

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>

帽子提示http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/

作为旁注，wmode =“transparent”也有效。

CSS悬停工具提示泡沫隐藏在iFrame视频背后

1 个答案: