Javascript CSS:Hover'；s由于溢出而隐藏的文本存在问题：隐藏？_Javascript_Html_Css_Xhtml_Stylesheet

Javascript CSS:Hover'；s由于溢出而隐藏的文本存在问题：隐藏？

javascript html css

Javascript CSS:Hover'；s由于溢出而隐藏的文本存在问题：隐藏？,javascript,html,css,xhtml,stylesheet,Javascript,Html,Css,Xhtml,Stylesheet,在我的应用程序中，我有很多包含文本的div。所有div都将overflow设置为hidden，这样，如果容器不够大，无法容纳写入内容，用户就看不到文本如果用户想要看到隐藏的文本，他们应该将鼠标移到“框”上。然后，该框展开并显示文本。听起来很简单，对吧嗯，我遇到了问题，我尝试的解决方案不起作用。问题是，当用户将鼠标移到框上时，文本确实会出现，但仍然很窄，并从底部框中出来，这与“溢出”设置为“可见”时的方式相同下面是应用于div框的标准css： .newevent { overflow

在我的应用程序中，我有很多包含文本的div。所有div都将overflow设置为hidden，这样，如果容器不够大，无法容纳写入内容，用户就看不到文本

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

嗯，我遇到了问题，我尝试的解决方案不起作用。问题是，当用户将鼠标移到框上时，文本确实会出现，但仍然很窄，并从底部框中出来，这与“溢出”设置为“可见”时的方式相同

下面是应用于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;
}

当文本悬停在上方时，如何“重新绘制”文本，以便文本可以使用新的加宽区域，而不是像它仍然在一个狭窄的框中那样运行。

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


$（文档）.ready（函数（）{
$（'.box'）.mouseover（函数（）{
$（this.addClass（'boxHover'）；
$（this）.children（'.content'）.addClass（'contentHover'）；
});
$（'.box'）.mouseout（函数（）{
$（this.removeClass（'boxHover'）；
$（this）.children（'.content'）.removeClass（'contentHover'）；
});
});

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>


.盒子
{
宽度：200px；
填充：50px；
高度：100px；
z指数：0；
背景：#D4；
边框：中红色虚线；
边缘底部：5px；
}
.内容
{           
高度：100px；
溢出：隐藏；
}
boxHover先生
{
z指数：1；
高度：自动；
宽度：400px；
}
.contentHover
{
高度：自动；
溢出：可见；
}

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>


在此处插入内容。。。
在此处插入内容。。。。

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


$（文档）.ready（函数（）{
$（'.box'）.mouseover（函数（）{
$（this.addClass（'boxHover'）；
$（this）.children（'.content'）.addClass（'contentHover'）；
});
$（'.box'）.mouseout（函数（）{
$（this.removeClass（'boxHover'）；
$（this）.children（'.content'）.removeClass（'contentHover'）；
});
});

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>


.盒子
{
宽度：200px；
填充：50px；
高度：100px；
z指数：0；
背景：#D4；
边框：中红色虚线；
边缘底部：5px；
}
.内容
{           
高度：100px；
溢出：隐藏；
}
boxHover先生
{
z指数：1；
高度：自动；
宽度：400px；
}
.contentHover
{
高度：自动；
溢出：可见；
}

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>


在此处插入内容。。。
在此处插入内容。。。。

您确定要将如此大的填充设置为50px吗？它可能会将文本压缩到中间。您确定要将如此大的填充设置为50px吗？它可能会将文本压缩到中间。