Html 阻止隐藏文本更改父div的大小

我有一个显示文本的面板。我希望能够鼠标悬停在面板上，让它显示新文本。 我遇到的问题是，我想要显示的悬停文本使面板比我想要的大

简单地说，当鼠标悬停在面板上时，面板应该看起来像一个全新的面板，即不同的颜色和不同的文本

我发现有人发布了这个JSFIDLE示例，这基本上是我想要实现的，但我没有在下面使用图像。

下面是我的JSFIDLE示例：

.h2{
字体大小：30px；
}
.类别类别项目{
位置：相对位置；
利润率：20px；
文本对齐：居中；
填充：70px；
背景色：黑色；
颜色：灰色；
}
.悬停文本{
文本对齐：居中；
不透明度：0；
位置：相对位置；
颜色：黑色；
}
.类类型项：悬停{
背景色：#AD1515；
}
.类类型项：悬停p{
不透明度：1；
浮动：左；
}
.类类型项：悬停h2{
不透明度：0；
}

瑜伽课
说明如下

更改div大小的代码如下：

.class-type-item:hover p {
    float:left;
}

---

移除浮动：悬停时向左，div将保持悬停时的相同大小。

为什么不为容器div“class type item”设置一个高度？

将容器

class type item

和两个面板

h2

和

p

的

高度和
宽度设置为相同的值。比如说
高度：100px
和
宽度：150px

.class-type-item,
h2,
p {
    height: 100px;
    width: 150px;
}

然后将
position:absolute
添加到面板中。然后将它们放置在容器内彼此的顶部。不需要浮动：左

h2,
p {
    position: absolute;
    top: 0;
    left: 0;
}

谢谢你的回答。这对我有用！唯一的问题是，它与移动设备不太兼容。因为它是一个固定的尺寸，所以不能很好地扩展。无论如何，这可能值得提出一个全新的问题，但也许有一种方法可以在使用引导span或col md时使用。定义宽度和高度对于不同的设备不是很好。我想保留它，以便它的大小取决于屏幕的大小。正如我上面提到的那样，我已经尝试过了，而且效果很好，但不幸的是，这不是我正在寻找的确切解决方案