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

Question

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

简而言之，当悬停在上面时，面板应该看起来像一个全新的面板，即不同的颜色和不同的文本。

我发现有人发布了这个示例 jsFiddle，这基本上是我想要实现的，但我没有在下面使用图像。 http://jsfiddle.net/xsFmA/345/

这是我的示例 jsFiddle:

.h2 {
  font-size: 30px;
}

.class-type-item {
 position: relative; 
 margin: 20px;
 text-align:center;
 padding:70px;
 background-color:black;
    color:grey;
}

.hover-text {
    text-align: center;
    opacity: 0;
    position: relative;
 color:black;
}

.class-type-item:hover {
 background-color:#AD1515;
}

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

.class-type-item:hover h2 {
    opacity:0;
}

<div class="row-fluid">
    <div class="col-md-6">
        <div class="class-type-item" >
            <h2>Yoga Classes</h2>
            <p class="hover-text">description goes here </p>
        </div>
    </div>
</div>

我似乎只能找到使用图像的示例。任何帮助或指示都会有很大的帮助！谢谢！

Answer 1

改变 div 大小的代码是这样的：

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

移除悬停时的 float:left，悬停时 div 将保持相同大小。

Answer 2

为什么不直接为容器设置高度 div "class-type-item"？

Answer 3

将容器 class-type-item 的 height 和 width 以及两个面板 h2 和 p 设置为相同的值。假设 height: 100px 和 width: 150px;

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

然后将 position: absolute 添加到面板。然后将它们放置在容器内彼此之上。不需要 float: left.

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

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

Stop Hidden Text From Changing Size of Parent div

html

css

hover