如何禁用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;
}

这里是jsFiddle链接

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

Answer 2

我不太明白你的问题。是你想让盒子改变高度而不改变颜色吗?如果是，你只需要移除。box:hover的background-color属性只需将代码更改为

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

查看这个:https://jsfiddle.net/nhvuwu9z/16/

Answer 3

您可以使用jQuery为div添加一个类，使背景保持白色。

$(function(){
    $('.box').one("mouseover", function() {
        $('.box').addClass('box_white');
    });
});

.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;
}
.box_white {
    background-color: #fff !important;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="box">
    <p class="text">text text text</p>
    <p class="content">text text text text</p>
</div>