0
我正在使用此CSS腳本創建工具提示彈出式氣泡。 http://trentrichardson.com/examples/csstooltips/CSS懸停工具提示泡泡被隱藏在iFrame視頻後
我讓它工作正常，但它被嵌入的iframe視頻隱藏在下面的div中。
當我將鼠標懸停在「第一位」上時，您可以看到它隱藏在視頻後面。 但是，當我將鼠標懸停在「數字十一」上時，它正確顯示在圖像的前面。
我試過改變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>
iframe具有最高的z索引值..其他元素不能放在iframe之上..這可以通過在菜單中插入iframe來解決.. google for it –