我搜索了很多,但至少没有找到,或者至少我没有能够实现正确答案。
我正在建立一个网站,其中我有一个带图像的滚动div。我将工具提示放在图像的某些部分上,但是当它们被激活时,工具提示会被div的约束切断。
工作示例:http://navalage.neocities.org/menu1-test.html
位于底部菜单中。舞台工具提示出现在div内部,我将其他人作为我希望他们做的一个例子。
希望有人能提供帮助,谢谢!
CSS
<style>
body {
background-color: black;
}
.div {font-family: san-serif;}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border: 1px solid ;
border-color: rgba(255,255,255,1);
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 294px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
border: 1px dashed white;
font-family: arial;
/* Position the tooltip text - see examples below! */
position: absolute;
top: 0px;
opacity: 0;
-mox-transition: 1;
z-index:33;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
z-index:34;
}
</style>
HTML是;
<div style="z-index: 2; overflow: scroll; max-width: 240px; background-color: black; margin-left: 84px; margin-top: -54px; width: 213px; height: 50px; -moz-transform: skew(1.5deg);">
<!-- Stage -->
<div class="tooltip" style="z-index: 3; margin-top:2px; margin-left: 0px; width: 35; height: 44px;">
<span style="margin-left: -84px; margin-top: -0px; z-index: 999;" class="tooltiptext"><b><u>Stage</b></u>: This is where you go to battle the enemy in the main story line (there isnt much of one).</span>
</div>
<img src="IMAGES/mainmenu.jpg" style="height:50px; margin-left: -5px; margin-top: -47px; -moz-transform: skew(-1.5deg);">
<!-- END -->
<!-- Fleet -->
<div class="tooltip" style="top: 489px; left: 130px; width: 35; height: 44px;">
<span style="margin-left: -120px; margin-top: -110px;" class="tooltiptext"><b><u>Fleet</b></u>: Here you can set up your base defence when somebody is attacking. You can also repair your ships and check on the current status of any fleets on a mission.</span>
</div>
<!-- END -->
<!-- Alliance -->
<div class="tooltip" style="position: absolute; top: 489px; left: 168px; width: 35; height: 44px;">
<span style="margin-left: -158px; margin-top: -91px;" class="tooltiptext"><b><u>Alliance</b></u>: Acces your alliance for donations, Elite Challenges (EC), Alliance fleet, Collect Supplies, Alliance War, and alliance technology.</span>
</div>
<!-- END -->
<!-- Item -->
<div class="tooltip" style="position: absolute; top: 489px; left: 206px; width: 35; height: 44px;">
<span style="margin-left: -196px; margin-top: -53px;" class="tooltiptext"><b><u>Item</b></u>: Acces your items, as well as the shop, and flash sale.</span>
</div>
<!-- END -->
<!-- Mail -->
<div class="tooltip" style="position: absolute; top: 489px; left: 244px; width: 35; height: 44px;">
<span style="margin-left: -234px; margin-top: -91px;" class="tooltiptext"><b><u>Mail</b></u>: This is where you recieve mail from system, friends, alliance leaders, escort, scout reports, and attack and defense reports. </span>
</div>
<!-- END -->
<!-- NEXT -->
<div class="tooltip" style="position: absolute; top: 489px; left: 282px; width: 25; height: 44px;">
<span style="margin-left: -272px; margin-top: 0px;" class="tooltiptext">Go to the next menu page
<a href="menu2.html">
<button>
Next</button>
</a>
</span>
</div>
<!-- END -->
</div>
答案 0 :(得分:0)
你必须在这个div和span中改变你的css
<div class="tooltip" style="z-index: 3;margin-top:2px;margin-left: 0px;width: 35;height: 44px;position: absolute;">
<span style="margin-left: -84px;margin-top: -72px;/* z-index: 999; */" class="tooltiptext"><b><u>Stage</u></b>: This is where you go to battle the enemy in the main story line (there isnt much of one).</span>
</div>