0
이 CSS 스크립트를 사용하여 툴팁 팝업 거품을 만듭니다. http://trentrichardson.com/examples/csstooltips/CSS Hover 툴팁 거품이 iFrame 비디오 뒤에 숨겨져 있습니다.
괜찮습니다. 아래 div에 삽입 된 iframe 동영상에 의해 숨겨져 있습니다.
"넘버 원"위로 마우스를 가져 가면 비디오 뒤에 숨겨진 것을 볼 수 있습니다. 그러나 "숫자 11"위로 마우스를 가져 가면 이미지 앞에 올바르게 표시됩니다.
나는 Z- 인덱스 값을 변경하려고했지만 변경하지 않았습니다. 당신의 도움이
<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 –