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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

3993閲覧

【Materialize】フラットデザインボタンの、オンマウス時の背景色

nnahito

総合スコア2004

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2016/11/15 12:33

質問概要

CSSフレームワーク、「Materialize」の
class="btn-flat"を指定したときの、オンマウス時の背景色の変更方法を知りたい。

質問

CSSフレームワーク、「Materialize」のボタンデザインで、class="btn-flat"を指定したときの、オンマウス時の背景色の変更方法が分かりません。

例えば、

html

1<a href="#" class="waves-effect waves-light btn-flat light-blue darken-4">Link</a> 2

とした時、これは最初から背景色がlight-blue darken-4になってしまいます。

オンマウス時の背景色を変えるには、直接CSSファイルを弄るしか無いのでしょうか?
ご存じの方いらっしゃいましたら、ご教示頂けますとうれしいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

残念ながらそのような機能は実装されていないようです。
公式の issue にも似たような話題が挙がっていますが、進展なさそうです。

公式のColorページ - Sass の項にあるように @extendを使って:hoverの背景色を変更させるか、

シンプルに

html

1 <a class="waves-effect waves-teal btn-flat my-btn-flat">Button</a>

sass

1.my-btn-flat { 2 color: white; 3 background-color: red; 4 5 &:hover { 6 background-color: lighten(red, 20%); 7 } 8}

こんな感じで上書きしてしまうか、のような方法になりそうです。

投稿2016/11/15 17:57

ezaki

総合スコア204

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

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

nnahito

2016/11/16 06:41

ご回答ありがとうございます。 >公式の issue にも似たような話題が挙がっていますが、進展なさそうです。 なるほど…そうなのですね… 上書きの手段を利用させていただきます! しかし、 &:hover { background-color: lighten(red, 20%); } という書き方ができるですね! こちらも勉強にありました! ありがとうございます
ezaki

2016/11/16 07:08

上書きについてコメントありましたのでちょっと補足させてもらいますね。 &:hover と lighten (反対の記述として暗くするdarkenもあります)は どちらも SCSS 記法になります。 cssで書かれる場合は .my-btn-flat:hover {background-color:#EF5350 } のように素直に書くことになりますね。
nnahito

2016/11/16 07:24

コメントありがとうございます。 SCSS……単語は聞いたことありますが、実態なんなのかは知らないですね…… 勉強してみます、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問