hoverが反映されない

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• [ ]hover(c-btn3とc-btn3--green)を両方反映させたい

前提

ここに質問の内容を詳しく書いてください。
（例）
CSS設計（FLOCSS）でコーディングをしていますがhover アクションがされません。

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

エラーメッセージ

該当のソースコード

<a class="c-btn3 c-btn3--green" href="">無料お試し</a></div>

.c-btn3{
  min-width: rem(250);
  padding: rem(22) rem(20);
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  background-color: #fff;
  font-size: rem(16);
  font-weight: bold;
  line-height: 1;
  letter-spacing: rem(0.72);
  border-radius: rem(5);
  @include mq("md") {
    min-width: rem(310);
    font-size: rem(18);
  }
}

.c-btn3:hover{
  @include mq("md") {
    color: $white;
    opacity: 1;
  }
}

.c-btn3.c-btn3--green {
  color: $green;
}### ```ここに言語を入力
ヘディングのテキスト

.c-btn3:hover .c-btn3--green:hover {
@include mq("md") {
background-color: $yellow;
}
}

### 試したこと

hovarについて下記のようにクラス名を指定しましたが解決しませんでした。

①.c-btn3.c-btn3--green:hover{
}

②.c-btn3:hover.c-btn3--green:hover{
}

c-btn3のモディファイアとしてc-btn3--greenを作成しています。
c-btn3とc-btn3--green両方の内容を反映させたいのですが、hoverした際.c-btn3:hoverの内容が反映されません（文字が白くならない）
クラス名指定方法に問題があるかと推測できますが解決することができませんでした。


教えていただけると幸いです。
よろしくお願い致します。




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

ここにより詳細な情報を記載してください。

Comments

[maisumakun]

・mqやremの定義はどこにありますか？
・SCSSから生成したCSSは意図通りのものですか？

[yuka_r12]

お返事ありがとうございます！
mqやremの定義はどこにありますか？

記述ミスすみません・・・
定義はこちらになります

// ブレイクポイント
$breakpoints: (
sm: 600,
md: 768,
lg: 1024,
xl: 1440,
);

// メディアクエリ
$mediaquerys: (
sm: "screen and (min-width: #{map-get($breakpoints,'sm')}px)",
md: "screen and (min-width: #{map-get($breakpoints,'md')}px)",
lg: "screen and (min-width: #{map-get($breakpoints,'lg')}px)",
xl: "screen and (min-width: #{map-get($breakpoints,'xl')}px)",
);

// メディアクエリを "@include mq(){}" で書くことができる
@mixin mq($mediaquery: md) {
@media #{map-get($mediaquerys, $mediaquery)} {
@content;
}
}

// pxからremへの計算式
// 例：rem(32) → 2rem
@function rem($pixels) {
@return math.div($pixels, 16) * 1rem;
}

// 数値のみを取り出す
// 例：strip-unit(16px) → 16
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return math.div($number, $number * 0 + 1);
}
@return $number;
}

// フォントサイズ ÷ 画面幅 * 100vw の計算
// 例：vw(1250px, 16px) → 16px ÷ 1250px × 100vw
@function vw($window_width, $size) {
@return math.div($size, $window_width) * 100vw;
}

// ルートフォント設定
html {
// ~ 375px
@media (max-width: 375px) {
font-size: vw(375, 16);
}

// 376px ~ 767px
font-size: 100%;

// 768px ~ インナー幅＋余白
@include mq(md) {
font-size: vw(strip-unit($breakpointInner), 16);
}

// インナー幅＋余白 ~
@media ( min-width: $breakpointInner ) {
font-size: 100%;
}
}

・SCSSから生成したCSSは意図通りのものですか？
CSSを確認しましたが、エラーなどは出ていませんでした。

知識不足で申し訳ありません・・・
何卒よろしくお願いいたします。

Answer 1

.c-btn3:hoverと.c-btn3.c-btn3--greenでは詳細度が同じなので、両方当てはまる要素ではあとから書いた方のCSSが優先されます。

.c-btn3:hoverをあとから設定するのが手っ取り早いです。

Comments

[yuka_r12]

ご回答ありがとうございました！！
詳細度について知識が足りなかったので調べてみると、たくさん参考資料が出てきました！
アドバイスいただいた通りコーディングすると実装することができました。

どうもありがとうございました！！