css溢出问题

我正在使用jQuery和CSS为某些内容创建工具提示。它的工作方式应该如此，因为tooltip出现在mouseenter上，并在mouseleave上消失。我的问题在于我的CSS布局。当提示渲染页面，它收缩到其父的高度：css溢出问题

HTML：

<div id="allInvTable"> 
    <div class="invItmCont" style="border-bottom:1px solid white;"> 
     <div class="invItmItm">An Item</div> 
     <div class="invItmStats" style="display:none;"> 
      <div style="clear:both;"> 
       ...Some content here... 
      </div> 
      <span style="display: none; top: -90px;"> 
       <div style="clear:both;"> 
        ...The same content placed here via jquery to display as the tooltip... 
       </div> 
      </span> 
     </div> 
    </div> 
</div>

CSS：

#allInvTable { 
    overflow:auto; 
} 

.invItmCont { 
    text-decoration:none; 
    display:block; 
    float:left; 
    padding:0 15px; 
    text-align:center; 
    position:relative; 
    clear: both; 
} 

.invItmCont span { 
    background-color: #000; 
    border: 5px solid #826217; 
    border-radius:15px; 
    -moz-border-radius:15px; 
    -o-border-radius:15px; 
    -webkit-border-radius:15px; 
    -moz-box-shadow: 2px 2px 2px #000; 
    -webkit-box-shadow: 2px 2px 2px #000; 
    box-shadow: 2px 2px 2px #000; 
    width:200px; 
    height:auto; 
    position:absolute; 
    display:none; 
    top:-90px; 
    color:#fff; 
    left:-37px; 

}

仅供参考，jQuery的：

<script> 
    $("#allInvTable div.invItmCont").append("<span></span>"); 
    $("#allInvTable div.invItmCont").hover(function() { 
     $(this).find("span").animate({opacity:"show", top: "-70"}, "slow"); 
     var itmStat = $(".invItmStats", this).html(); 
     $(this).find("span").html(itmStat); 
    }, 
    function() { 
     $(this).find("span").animate({opacity:"hide", top: "-90"}, "fast"); 
    }); 
</script>

我知道它与overflow:auto;#allInvTable有关，因为当我重新移动该属性，它呈现正确，但物品流出他们的容器。我该如何解决？

来源

2012-07-09 chaoskreator

你能提供一个工作jsfiddle吗？ – Conner 2012-07-09 06:04:53

@Conner实际上，不，但是这里是设置的链接：http://jsfiddle.net/mgtKD/ – chaoskreator 2012-07-09 07:24:36

嗯，我知道这并不直接回答你的问题，但你看着像Twitter的引导，例如现有的工具提示库：http://twitter.github.com/bootstrap/javascript.html#tooltips

我之所以说这是因为，我宁愿花时间工作在我的应用程序的核心，而不是尝试和重新发明轮子。除非，你确实在试着学习开始创建轮子的过程。顺便说一句，这也很好。你也学到很多东西。

来源

2012-07-09 06:02:01 ErJab

我已经看过几个“插件”，但没有一个真正服务于我的目的，而且大多数都过度臃肿我需要的。而且，是的，我觉得自己编写代码会帮助我更好地理解jQuery和CSS（相当精通CSS，但不是jQuery ...我是一个PHP人）。 – chaoskreator 2012-07-09 06:06:27

你可以做的一件事就是将“工具提示”内容交换到你想要显示的地方（已经有了你想要的可见性和格式）。

此方法将显示：none元素视为内容隐藏。

$("#allInvTable div.invItmCont") 
.hover(function() { 
    var outgoing = $(".invItmItm", this).html(); 
    var incoming = $(".invItmStats", this).html(); 
    $(".invItmItm", this).html(incoming); 
    $(".invItmStats", this).html(outgoing); 
    }, function() { 
    var outgoing = $(".invItmItm", this).html(); 
    var incoming = $(".invItmStats", this).html(); 
    $(".invItmItm", this).html(incoming); 
    $(".invItmStats", this).html(outgoing); 
    } 
);

参见：http://jsfiddle.net/zatz/mgtKD/6/

或者，你可以开始使用应该是足够的，你最终驱动使用/适应现有的库中的一个不愉快的经历Z-层把玩。

来源

2014-02-26 18:21:40

回答

相关问题