CSS：悬停的问题与隐藏的文字，因为溢出：隐藏？

在我的应用程序中，我有很多包含文本的div。所有div的溢出设置为隐藏状态，以便用户在容器尺寸不足以容纳书写时不会看到文本。CSS：悬停的问题与隐藏的文字，因为溢出：隐藏？

如果用户想要查看隐藏文本，他们应该将鼠标悬停在“框”上。该框然后展开并显示文本。听起来很简单，对吧？

那么我有问题，我试过的解决方案没有奏效。问题在于，当用户将鼠标悬停在框上时，文本的确出现，但保持非常窄并从底部框出来，同样如果溢出被设置为可见的话。

下面

是标准的CSS应用于div框：

.newevent 
{ 
    overflow: hidden; 
    z-index: 0; 
}

我试图通过设置悬停触发，当它被激活箱扩大到解决这个问题，我认为这会那么意味着将有有更多的空间来显示文本，下面是悬停效果：

.newevent div:hover 
{ 
    width: 200px;  
    padding: 50px; 
    background-color:#D4D4D4; 
    border: medium red dashed; 
    overflow: visible; 
    z-index: 1; 
}

我怎么去当它盘旋，使得文本可以使用新的放大区域，而不是表现“重绘”文本因为它仍然在一个狭窄的盒子里。

来源

2010-05-17 Michael Harringon

您确定要设置如此大的50px填充吗？它可能会把文本压缩到中间。 – sirhc 2010-05-17 06:24:55

这是我的解决方案。我使用了jQuery库，但这也可以用普通的旧javascript来完成。

用于处理mouseover和mouseout事件的javascript。

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.box').mouseover(function() { 
       $(this).addClass('boxHover'); 
       $(this).children('.content').addClass('contentHover'); 
      }); 

      $('.box').mouseout(function() {     
       $(this).removeClass('boxHover'); 
       $(this).children('.content').removeClass('contentHover'); 
      }); 
     });  
</script>

divs不同状态的样式。

<style type="text/css"> 
     .box 
     { 
      width: 200px; 
      padding: 50px; 
      height: 100px; 
      z-index: 0; 
      background: #D4D4D4; 
      border: medium red dashed;    
      margin-bottom: 5px; 
     } 

     .content 
     {   
      height: 100px; 
      overflow: hidden; 
     } 

     .boxHover 
     { 
      z-index: 1; 
      height: auto; 
      width: 400px;     
     } 

     .contentHover 
     { 
      height: auto; 
      overflow: visible; 
     } 
</style>

HTML的正文。为了保持答案的简洁，我删除了这些内容，但是您应该添加一些文本，以便溢出以查看解决方案的工作方式。

<body> 
    <div class="box"> 
    <div class="content"> 
     Insert content here... 
    </div> 
    </div> 
    <div class="box"> 
    <div class="content"> 
     Insert content here.... 
    </div> 
    </div> 
</body>

来源

2010-05-17 07:07:56

CSS：悬停的问题与隐藏的文字，因为溢出：隐藏？

回答

相关问题