css hoverが効かない

Question

前提・実現したいこと

pタグにhoverをつけてbackgroundのカラーを適応させたいのですがなぜかスタイルがうまく当たりません。
どうしてかわからないです。
誰か教えてください????‍♂️

該当のソースコード

//style.scss
div,
span,
img,
p {
  &.hover {
    :hover {
      background-color: blue;
    }
  }
}

  <p className="hover">
    マウスを当てたら色が変わります。
  </p>

Comments

[thyda.eiqau]

ご提示のコードは、片方はscssであることがわかりますが、もう一方は何ですか？JSXなのかナチュラルなHTMLなのか判断する手段が質問文にもコード中にもない（端折りすぎ）ので回答者に混乱を招いています。状況がわかるように質問文を修正してください。

Answer 1

こんにちは。

<p className="hover">→<p class="hover">
:hover {→&:hover {

Comments

[Hogeike]

ReactのComponent内の話であれば、`className`はそのままでよいと思います。（classはJSの予約語のため）

[Lhankor_Mhy]

なるほど、タグを見落としていました。
ありがとうございます。

[satodesu]

ありがとうございます。
解決できました