CSS悬停工具提示泡沫隐藏在iFrame视频后面 [英] CSS Hover Tooltip Bubble Being Hidden Behind iFrame Video
问题描述
我使用这个CSS脚本来创建工具提示弹出式窗口。
http://trentrichardson.com/examples/csstooltips/
I'm using this CSS script to create tooltip popup bubbles. http://trentrichardson.com/examples/csstooltips/
我有它的工作确定，但它被嵌入的iframe视频隐藏在下面的div。
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.
我尝试更改z-index值，没有变化。
I have tried changing the z-index values, but no change.
感谢您的帮助
<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>
推荐答案
我假设iframe会拉一个flash播放器。您需要将wmode = opaque传递给播放器 http://kb2.adobe.com/cps /127/tn_12701.html ，而且您无法控制iframe，因此您无法按照需要使用它。
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.
<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也可以。
As a side note wmode="transparent" also works.
这篇关于CSS悬停工具提示泡沫隐藏在iFrame视频后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
