CSS:Hover的问题是由于溢出隐藏的文本:隐藏?

时间:2010-05-17 03:59:59

标签: javascript html css xhtml stylesheet

在我的应用程序中,我有很多包含文本的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;
}

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

1 个答案:

答案 0 :(得分: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>