要素にカーソルをかざしたときに色を変えたい

Question

マウスカーソルをかざすと色が変わる仕組みを創りたいです。

<div class="detail_call_button">
  <object>
   　<a href="0000-000-000">
       <p class="detail_call_subtext">電話で無料相談・24時間365日対応</p>
       　 <p class="detail_call_small_subtext">0000-000-000</p>
     </a>
   </object>
</div>

.detail_call_button{
  padding: 10px 60px;
  background-color: #DB848D;
  border-radius: 100px;
  box-shadow: 0 5px #808080;

  .detail_call_subtext{
    text-align: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 400;

    .detail_tell{
      width: 20px;
      height: 19px;
      margin-bottom: 2px;
    }
  }
  .detail_call_small_subtext{
    text-align: center;
    color: white;
    font-size: 2.9rem;
    font-weight: 400;
  }
}

試したことは、

.detail_call_button{
  padding: 10px 60px;
  background-color: #DB848D;
  border-radius: 100px;
  box-shadow: 0 5px #808080;

　:hover{
   opacity: 0.7;
  }

のように:hoverで指定してみましたが、文字にカーソルを合わせると変わるのですが、
要素自体に触れてもなにも変化しないです。

どうしたら要素全体にカーソルをかざすと、色が変わるようになるのでしょうか…。

Answer 1

.detail_call_buttonの中で書いたことが原因でした。
外で改めて.detail_call_button:hoverで設定したらいけました。