html - 如何为特定的 css 行禁用 css 转换？

Question

您好，我有一个设置为固定高度的 div，当您将鼠标悬停在它上面时，它会增长一定量。

我也设置了它，所以当你将鼠标悬停在 div 上时，背景颜色也会改变。

现在悬停会改变高度和背景颜色。有什么方法可以仅禁用背景颜色的过渡吗？背景颜色随着高度的变化而变化，随着高度的变化从黑色逐渐变为白色。我不希望背景颜色褪色。

HTML:

<div class="box">
    <p class="text">text text text</p>
    <p class="content">text text text text</p>
</div>

CSS:

.box {
    background-color: #000;
    width: 200px;
    height: 300px;
    position: relative;
    top: 80px;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.box:hover {
    height: 300px;
    background-color: #fff;
    top: 40px;
}

Here is the jsFiddle link

Answer 1

我不太明白这个问题，但这是你想要的吗？

.box {
    background-color: #000;
    width: 200px;
    height: 300px;
    position: relative;
    top: 80px;
    -webkit-transition: max-height 0.10s ease;
    -moz-transition: max-height 0.10s ease;
    -ms-transition: max-height 0.10s ease;
    -o-transition: max-height 0.10s ease;
    transition: max-height 0.10s ease;
}