我的页面上有一个滑块,高度为200px并且已应用溢出隐藏,在此滑块内有列表项/图像,它们也是200px.当您将鼠标悬停在图像ID上方以显示上面的工具提示时,我唯一的问题是由于溢出规则而隐藏了工具提示.
我认为id能够通过给它一个更高的z索引来显示工具提示,但这似乎没有用,你能让孩子元素与父母分手吗？
我希望这是有道理的.
简而言之,我的代码结构与下面的类似
<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>
三网融合
.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;
}
解决方法
据我所知,你不能像你所描述的那样得到一个破坏父母规则的子元素.相反,您可能希望将工具提示附加到顶级元素(如document.body),并使用一点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>