在我的应用程序中，我有很多包含文本的 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;
}
当鼠标悬停在文本上时，我该如何“重绘”文本，以便文本可以使用新的加宽区域，而不是像它仍然在一个窄框中那样表现。
最佳答案
这是我的解决方案。我使用了 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>
关于javascript - CSS:Hover 的文本问题因为溢出而被隐藏:隐藏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2846582/