覆盖溢出隐藏父元素的

<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}

其必须重写父的溢流隐藏属性，以便与出的切口是有可能显示出其的工具提示。

来源

2011-07-13 vetri02

如果您只需要使用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"; 
}

来源

2011-07-13 07:35:25 bezmax

覆盖溢出隐藏父元素的

回答

相关问题