javascript – 使子元素出现在父元素之外

我的页面上有一个滑块,高度为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>

javascript – 使子元素出现在父元素之外

解决方法

相关文章