css - エラーの原因となる CSS トランジションアウト

Question

画像の不透明度の変更など、マウスオーバー時にさまざまなトランジション効果があります。ただし、マウスがアイテムから離れたときにスムーズな遷移が必要なため、通常の #div と ##div:hover に遷移コードを追加しましたが、これにより、ページの読み込み時に「遷移」します。かなり見苦しい方法 (ページの読み込みの最初のインスタンスでのみ、更新時に機能しません) であり、ページの読み込み時に遷移が発生しないように、javascript の mouseout 関数に相当するものがあるかどうか疑問に思っていました。

CSS の一部の例を次に示します。

#main_categories_item_image img {
    width: 64px;
    height: 64px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;    
    box-shadow: #000 0em 0em 0em;
}
#main_categories_item:hover 
#main_categories_item_image img {
    opacity: 0.7;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

そして、私はウェブサイトwww.ultimate-punch.comに取り組んでいます

どうもありがとう