htmlで記入したaタグ及び親要素に対してhoverを利用しマウスを乗せると色が変更する様にしたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
htmlに記載したコードにおいて親要素にcssで書いたhoverを利用したい。

<div class="heading-ctag"> <a class="left" href="#">Nature Remo を購入</a> </div> <div class="heading-dtag"> <a class="right" href="#">Nature Remo miniを購入</a> </div> ■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

cssでのhoverが反応しなくて困っています。

該当のソースコード

html
<div class="heading-btag">
<div class="heading-ctag">
<a class="left" href="#">Nature Remo を購入</a>
</div>
<div class="heading-dtag">
<a class="right" href="#">Nature Remo miniを購入</a>
</div>

css
.heading-ctag a{
margin-right:200px;
border: 2px solid white;
border-radius: 20px;
padding: 10px 40px;
}
にhoverを適用しマウスを乗せると色が変わるようにしたい。

試したこと

css
.heading-ctag:hover {
color:#B3B3B3;
color:white;
transition: 1s;
}
や

css
heading-ctag:hover｛
｝や a.left:hoverやheading-ctag:hoverと試してみましたが反応しないため分からなくなったので質問させて頂きました。
よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

aタグとその親要素に対してhoverを利用しborder-radius部分が白く塗りつぶされた状態となり、文字が黒になるようにしたい
ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

a要素に設定する必要があります。
a.left:hover で効くはずです。
a.left:hoverにはホバーしたときに変化させたいプロパティを設定します。
ホバーに反応する範囲を親要素のサイズに広げたい場合は、display: block を追加します。（これはお好みで）

a.left {
  display:block;
  transition: 1s;
}
a.left:hover{
  color:#B3B3B3;
}

Comments

[JUN2938]

ご回答頂きましてありがとうございます。
試してみたいと思います。

[JUN2938]

試してみたのですが親要素の部分をマウスを乗せると色が変わるようにしたいです。

[hatena19]

回答のように display:block; を追加すれば親要素と同じサイズまで広がりますから、親要素の範囲で色がかわるはずです。

[JUN2938]

.left a:hover {
display: block;
color:#B3B3B3;
color:white;
margin-right:200px;
border: 2px solid white;
border-radius: 20px;
padding: 10px 40px;
｝
この様にしてグレーからマウスを乗せるとホワイトにしたいのですが、反応しないのですがご教授ください

[hatena19]

a.left にホバー前の設定、
a.left:hover にはホバーしたときに変化する設定のみにしてくだい。

a.left {
display: block;
margin-right:200px;
border: 2px solid white;
border-radius: 20px;
padding: 10px 40px;
transition: 1s;
color:#B3B3B3;
}
a.left:hover{
color:white;
}

[JUN2938]

ご回答ありがとうございます。
aタグ部分はなりましたが周りを囲ってる部分は白くならず、またバックグラウンド画像の画像もズレてしまった場合はどのような対処が必要でしょうか？

[hatena19]

バックグラウンド画像も含む現状のHTMLとCSSを質問に追記してください。
また、周りを囲っている部分とはなんですか。具体的に説明してください。

[JUN2938]

背景画像に関しましては、
画像のcssに
background-position: center;
background-attachment: fixed;
}
で固定しました。
今回のhoverは親要素と子要素をグレーからwhiteにするので
.heading-ctag a{
margin-right:200px;
border: 2px solid white;
border-radius: 20px;
padding: 10px 40px;
}
この囲まれた要素が元はグレーでマウスを乗せるとaタグの部分は黒文字で周りが白に塗りつぶされた感じになると表現すれば良かったですね。
大変申し訳ございません