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

我完全不理解你的问题。你想让盒子改变它的高度而不是颜色吗？如果是，您只需要删除背景颜色＆＃39;属性来自＆＃39; .box：hover＆＃39; 只需将代码更改为此

即可

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

检查出来：https://jsfiddle.net/nhvuwu9z/16/

Answer 2

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

.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 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: