当前位置： 文江博客话题详情

CSS 悬停工具提示气泡隐藏在 iFrame 视频后面

发布于 2024-12-01 14:39:11 字数 4842 浏览 2 评论 0原文

我正在使用此 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>
原文

I'm using this CSS script to create tooltip popup bubbles.
http://trentrichardson.com/examples/csstooltips/

I have it working ok but it is being hidden by an embedded iframe video in the div below.

When I hover over "number one" you can see it get hidden behind the video.
However, when I hover over "number eleven" it is displayed correctly in front of the image.

I have tried changing the z-index values, but no change.

thank for your help

<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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

記柔刀 2024-12-08 14:39:11

我假设 iframe 将拉出一个 Flash 播放器。您需要将 wmode=opaque 传递给播放器 http://kb2.adobe.com/cps /127/tn_12701.html 并且由于您无法控制 iframe，您将无法按照您需要的方式使用它。

具有 wmode 设置的 YouTube 的旧嵌入代码是。

<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”也有效。

I assume the iframe is going to pull up a flash player. You need to pass wmode=opaque to the player http://kb2.adobe.com/cps/127/tn_12701.html and as you don't control the iframe you are not going to be able to use it the way you need.

The older embed code for youtube with wmode setting was.

<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>

Hat tip http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/

As a side note wmode="transparent" also works.

回复 原文
~没有更多了~

关于作者

沙沙粒小

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文