Question

在我的应用程序中，我有很多包含文本的div。所有div都将溢出设置为隐藏，这样如果容器的大小不足以包含写入，则用户不会看到文本。

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

我有问题，我尝试的解决方案无效。问题在于，当用户将鼠标悬停在方框上时，文本确实会出现但仍然非常狭窄并且从底部框出来，就像溢出设置为可见时一样。

下面的

是应用于div框的标准css：

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

如何将文本悬停在“重绘”文本上，以便文本可以使用新的加宽区域，而不是仍然在狭窄的框中。

Answer 1

这是我的解决方案。我使用了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>

div的不同状态的样式。

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

CSS：Hover的问题是由于溢出隐藏的文本：隐藏？

1 个答案: