質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

662閲覧

hoverが反映されない

yuka_r12

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

1グッド

0クリップ

投稿2023/05/06 22:06

実現したいこと

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

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

前提

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

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

エラーメッセージ

該当のソースコード

HTML

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

Sass

1.c-btn3{ 2 min-width: rem(250); 3 padding: rem(22) rem(20); 4 transition: all 0.3s ease; 5 display: inline-block; 6 text-align: center; 7 background-color: #fff; 8 font-size: rem(16); 9 font-weight: bold; 10 line-height: 1; 11 letter-spacing: rem(0.72); 12 border-radius: rem(5); 13 @include mq("md") { 14 min-width: rem(310); 15 font-size: rem(18); 16 } 17} 18 19.c-btn3:hover{ 20 @include mq("md") { 21 color: $white; 22 opacity: 1; 23 } 24} 25 26.c-btn3.c-btn3--green { 27 color: $green; 28}### ```ここに言語を入力 29ヘディングのテキスト

.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/ツールのバージョンなど) ここにより詳細な情報を記載してください。
hatena19を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/05/07 00:33

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

2023/05/07 01:05

お返事ありがとうございます! 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を確認しましたが、エラーなどは出ていませんでした。 知識不足で申し訳ありません・・・ 何卒よろしくお願いいたします。
guest

回答1

0

ベストアンサー

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

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

投稿2023/05/07 01:20

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuka_r12

2023/05/07 01:59

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問