CSS hoverアニメーション

Question

前提・実現したいこと

hoverした場合に色の変化のアニメーションをしたいのですが、
background-imageを付けた場合、変化しなくなります
background-imageを付けて変化させる場合どうしたらいいんでしょうか？

動かないソースコード

<style>
.abcdef{
            background:#676470;
            transition:all 0.3s ease;
}
.abcdef:hover
{
        background:#53a7ea;
}
</style>

<div class="abcdef" style="background:transparent url('') no-repeat center;background-size:contain">hello</div>

動くソースコード

<style>
.abcdef{
            background:#676470;
            transition:all 0.3s ease;
}
.abcdef:hover
{
        background:#53a7ea;
}
</style>

<div class="abcdef">hello</div>

Answer 1

こちらでいかがでしょうか?

<style>
  .abcdef {
    /* background: #676470; */
    background-color: #676470;
    transition: all 0.3s ease;
    
    /* HTML側から持ってきました。 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .abcdef:hover {
    /* background: #53a7ea; */
    background-color: #53a7ea;
  }
</style>

<div class="abcdef" style="background-image: url('')">hello</div>

backgroundではなく、background-color、background-imageだけを使ってください。

Answer 2

style属性が優先されるためです。
画像指定のほうをbackgroundでなくbackground-imageで指定するか、background-color:#676470 !important;にするかどちらかで対応できると思います。

【詳細度 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

要素に追加されたインラインスタイル (例えば style="font-weight: bold;") は、常に外部スタイルシートの中のスタイルを上書きしますので、最も高い詳細度を持っていると考えることもできます。

---

動くサンプル：https://jsfiddle.net/y7qbeht1/