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

Answer 2

私はあなたの質問を正確に理解していません。あなたは箱の高さを変えたいが色は変えたくないのですか？そうならば、あなたは単に「■は：ホバー」から「背景色」属性を削除する必要が ちょうどこの

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