首页 文章

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

提问于
浏览 次
-1

你好我有一个设置为固定高度的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

html css css-transitions

3 回答

  • 2

    您可以使用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>
    回复于
  • 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;
}
    回复于
  • 1

    我完全不明白你的问题 . 你想让盒子改变它的高度而不是颜色吗？如果是，您只需要从'.box：hover'中删除'background-color'属性，只需将代码更改为此即可

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

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

    回复于

相关问题