Question

<div style="overflow:hidden;">  
        <div class="facepile">
            <div class="members">
                <ul class="listFace">

                        <li class="indFace">
                            <div class="face">                                  
                                <img src="/facepile/nopicture.png">
                                <div class="IDLE"></div>
                                <div class="tip"></div>
                            </div>
                            <div class="tooltip">
                                <div class="msgLeft">
                                    <div class="name">cFoo</div>
                                    <div class="city">ERT, MA</div>
                                    <div class="sendMsg">Send Msg</div>
                                </div>
                                <div class="favRight">
                                    <img src="favorite.png">
                                </div>
                                <div class="clear"></div>
                            </div>

                        </li>


                        <li class="indFace">
                            <div class="face">                                  
                                <img src="nopicture.png">
                                <div class="IDLE"></div>
                                <div class="tip"></div>
                            </div>
                            <div class="tooltip">
                                <div class="msgLeft">
                                    <div class="name">Rubynanny S.</div>
                                    <div class="city">Newton, MA</div>
                                    <div class="sendMsg">Send Msg</div>
                                </div>
                                <div class="favRight">
                                    <img src="/maybe.png?">
                                </div>
                                <div class="clear"></div>
                            </div>

                        </li>


                </ul>
            </div>  
        </div>

CSS：

    .facepile {float: left; width: 186px; border:2px solid #757373; margin-right: 10px; padding-bottom: 9px; display: block;}
.facepile .myHeaderGrey {background: url("/img/facepile/Header.png?v=1") no-repeat scroll 0 0 transparent;   height: 37px;  width: 186px;}
.facepile .myHeaderGrey .myHeaderReferTitle {font-size:14px; margin:0 0 0 12px;}
.facepile .members {padding-top:9px;}
.facepile .members ul.listFace {margin:0;padding:0 9px 0 9px; display: block;}
.facepile .members ul.listFace li.indFace {margin: 1px 1px 0 0; float: left;  position:relative; display: block;}
.facepile .members ul.listFace li.indFace .face {display:inline-block; width:40px; height:40px; background-color:#e4e5e6;}
.facepile .members ul.listFace li.indFace .face img{vertical-align: bottom;}
.facepile .members ul.listFace li.indFace .face .IDLE {background: url("/img/facepile/orangedot.png?v=1") no-repeat scroll 0 0 transparent; height:8px; width:8px; border-width:0 1px 1px 0; border-color:#fff; position: absolute; bottom:0; right:0;}
.facepile .members ul.listFace li.indFace .face .ONLINE {background: url("/img/facepile/greendot.png?v=1") no-repeat scroll 0 0 transparent; height:8px; width:8px; border-width:0 1px 1px 0; border-color:#fff; position: absolute; bottom:0; right:0;}

.facepile .members ul.listFace li.indFace:hover .face .tip{background: url("/img/facepile/tooltip_point.png?v=1") no-repeat scroll center top;  height: 9px; width: 40px; position: absolute; top:-1px; left:0px; z-index:100;}

.facepile .members ul.listFace li.indFace .tooltip {background-color:#e4e5e6; padding:5px; display:none; position:absolute; top:-57px; left:0; width:150px; border:1px solid #757373; z-index:90;}
.facepile .members ul.listFace li.indFace:hover .tooltip {display:inline-block;}
.facepile .members ul.listFace li.indFace .tooltip .msgLeft {float:left;}
.facepile .members ul.listFace li.indFace .tooltip .msgLeft .sendMsg {padding-top:10px; display:inline;}
.facepile .members ul.listFace li.indFace .tooltip .favRight {float:right;}
.facepile .members ul.listFace li.indFace .tooltip .clear {height:0}

工具提示必须覆盖父级的溢出隐藏属性，因此可以显示切除的方式。

Answer 1

如果您只需要使用CSS，则无法使用CSS，请参阅此信息：SO - Is there a CSS parent selector?

如果您善于使用javascript，则可以使用parentNode访问父元素。因此，如果您使用javascript显示工具提示，则该函数将如下所示：

function showTooltip() {
    var tooltipElement = createTooltipNodeOrSomething(someParams);
    var parentElement = tooltipElement.parentNode;  
    parentElement.style.overflow = "both";
}

覆盖隐藏父元素的溢出

1 个答案: