ふわっと現れてふわっと消えるhoverがうまくいきません

Question

文字がふわっとオレンジ色になって、マウスを離したあとも、ふわっと元に戻る動きにしたいのですが、
うまくいきません。
参考サイトでは親要素にtransitionを貼れば、マウス解除後もふわっと消えると解説されてますが、
親要素に貼るとホバーすら起動しなくなりました。
どうすればうまくいくでしょうか？
よろしくお願いします。

参考サイト：
https://doggy-kbk12.com/transition/

<section class="question-mv">
  <div class="question-mv-wrap">
    <div class="question-mv-wrap-right">
      <h1>あああああああ</h1>
    </div>
  </div>
</section>

.question-mv {
  padding: 40px;
  height: auto;
  background-color: #02007F;
}

.question-mv-wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.question-mv-wrap-right {
  margin-top: 36px;
  margin: 0 auto;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.question-mv-wrap-right h1 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
  margin-bottom: 0px;
}

.question-mv-wrap-right p {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.question-mv-wrap-right:hover {
  color: orange;
}

Comments

[miyabi_pudding]

transitionも、
colorも、h1に当てるようにCSS組んでみてください。
それでも動作しなければコメント下さい。

[takawork]

ありがとうございます！
```
h1にtransactionを当てて、
.question-mv-wrap-right h1:hover {
color: orange;
}
としたらうまく行きました！
```

[miyabi_pudding]

では、自己解決の投稿をして、質問を閉じましょう。

[takawork]

miyabi_takatsukさんのお陰で解決したので、一言回答をお願いします。
ベストアンサーにします！

[m.ts10806]

ベストアンサーだけが欲しくて回答者してる人ってそんなにいないんじゃないかな。たぶんそういう人は回答者長くできない。

[takawork]

なるほど、了解しました！自分でベストアンサーをつけました！

Answer 1

h1にtransactionを当てて、

.question-mv-wrap-right h1:hover {
color: orange;
}

としたらうまく行きました！