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;
}

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

Answer 2

将容器height的{{1}}和width以及两个面板class-type-item和h2设置为相同的值。让我们说p和height: 100px

width: 150px;

然后将.class-type-item, h2, p { height: 100px; width: 150px; }添加到面板中。然后将它们放在容器内的彼此顶部。无需position: absolute。

float: left

Answer 3

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

从更改父div的大小停止隐藏文本

3 个答案: