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：懸停的問題與隱藏的文字，因爲溢出：隱藏？

回答

相關問題