可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have a slider on my page that has a height of 200px and has overflow hidden applied, inside this slider there are list items/images which are aall also 200px. When you hover over the image id like to show a tooltip above, my only problem is that the tooltip is hidden due to the overflow rule.
I thought id be able to show the tooltip by giving it a higher z index but that didnt seem to work, can you get child elements to break from their parent?
I hope this makes sense.
In brief my code structure is similar to the below
<div class="clip"> <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> </div>
css...
.clip { height:200px; overflow:hidden; width:400px; } .tooltip { font-weight:bold; position: relative; } .tooltip a { font-weight:bold; } .tooltip span { margin-left: -999em; position: absolute; } .tooltip:hover span { background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent; font-size: 11px; height: 163px; left: -100px; margin-left: 0; padding: 40px 30px 10px; position: absolute; top: -200px; width: 310px; z-index: 99; }
回答1:
To the best of my knowledge you can not get a child element to break the rules of a parent as you have described. Instead, you may want to attach the tooltip to a top level element such as document.body, and position it against the absolute position of your image with a little javascript
<head> <style> #container { position: relative; } #tooltip { position: absolute; display:none; width: 200px; height: 100px; z-index: 99; background-color: gold; top: 0px; left: 0px; } .clip { height: 200px; width: 400px; overflow: hidden; background-color: #C0C0C0; position: absolute; top: 50px; left: 0px; } img { height: 200px; width: 100px; background-color: #222222; } </style> </head> <script> function imgover(img, tip) { document.getElementById('tooltip').style.display = 'block'; document.getElementById('tooltip').innerHTML = tip; document.getElementById('tooltip').style.left = img.offsetLeft + 'px'; } function imgout() { document.getElementById('tooltip').style.display = 'none'; } </script> <body> <div id="container"> <div id="tooltip">Tooltip Text</div> <div class="clip"> <img onmouseover="imgover(this, 'Tip 1')" onmouseout="imgout()"/> <img onmouseover="imgover(this, 'Tip 2')" onmouseout="imgout()"/> <img onmouseover="imgover(this, 'Tip 3')" onmouseout="imgout()"/> </div> </div> </body>
回答2:
You can do the trick by setting the position to fixed on your tooltip. You'll have to set its position based on its parent by using negative margins.
回答3:
When you apply position: relative to a container, it makes any children that have position: absolute be positioned absolutely inside the container. So (0,0) will be the top left corner of the container, not of the window. You can remove the position: relative from the container, but then you will have to know the exact x,y position to place the tooltip.
If you are using a fluid layout, you won't know where to position it. So instead, you can leave it with relative positioning, and then adjust it a little with JavaScript. Something like this:
var tooltips = document.getElementsByClassName("tooltip"); var i; for (i = 0; i < tooltips.length; i++) { tooltips[i].style.top = tooltips[i].parentNode.parentNode.style.top - 200; tooltips[i].style.marginLeft = 0; // or display = "block" or whatever to show it }
Note that this code is untested. Note also that getElementsByClassName is not supported in older browsers, but you can find a manual implementation of it if you search the web.
