ボタンのhover時にエフェクトをつけたい

♥ 0

いいねをした人: 居ません

このトピックには7件の返信、3人の参加者があり、最後にひろにより2年、 9ヶ月前に更新されました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)

投稿者

投稿
2022年2月6日 12:02 PM #98129
ひろ
参加者

♥ 20
【お使いの Snow Monkey のバージョン】16.0.5
【お使いの Snow Monkey Blocks のバージョン】14.0.1
【お使いの Snow Monkey Editor のバージョン】7.0.0
【お使いのブラウザ】chrome
【当該サイトのURL】

### 実現したいこと

ボタンのhover時に色が反転するエフェクトをつけたいです。現状こちらのような状態です。

ボタンのスタイルはゴーストにしております。

### 発生している問題

cssにて以下のコードを反映させました。
```
.smb-btn {
  &:hover {
    color: #fff!important;
    border-color: #fff!important;
    background-color: #2a2a2a!important;
  }
}
```
しかし背景の色のみ変化しませんでした。hover前のcssを確認すると
```
background-color: transparent!important;
```
になっておりましたのでこれが原因なのかなと思いました。この打ち消し方がわかりませんでした。

どうぞよろしくお願い致します。

♥ 0

いいねをした人: 居ません
2022年2月7日 9:13 AM #98211

キタジマタカシ
参加者

♥ 2423

基本的にゴーストボタンは中が透明であるべきということで !important がついています。.smb-btn より強いセレクタで指定することで上書きできるので、例えば .smb-btn.smb-btn:hover にして background-color: red!important; とすると上書きできないですかね？

♥ 0

いいねをした人: 居ません

2022年2月10日 4:44 PM #98632

ひろ
参加者

♥ 20

キタジマさん

返事が遅くなり申し訳ありません。

○.smb-btn.smb-btn:hover にして background-color: red!important; とすると上書きできないですかね？

→こちら質問文で記載したものと同じだと思うのですが違う意味でしたでしょうか？

また!importantを打ち消す為にこちらを参考にしてみました。

CSS importantを上書きする方法

外部のスタイルシートにimportantの記述があるが邪魔だから上書きしたい！ということがあることでしょう。CSS importantの上書きについて解説します。

csshtml.work

が効果なしでした。

どうぞよろしくお願い致します。

♥ 0

いいねをした人: 居ません

2022年2月10日 6:38 PM #98644

キタジマタカシ
参加者

♥ 2423

違う意味でしたでしょうか？

はい。セレクタの詳細度が弱い可能性があるので、.smb-btn:hover を .smb-btn.smb-btn:hover と変更して詳細度を上げたら上書きできないですか？と書きました。

それでもダメなら他の部分に間違いがある可能性もあるので、実際のページを見てみないとわからないかもです。

♥ 0

いいねをした人: 居ません

2022年2月11日 3:43 PM #98721
ひろ
参加者

♥ 20
```
.smb-btn {
  .smb-btn.smb-btn:hover {
    color: #fff!important;
    border-color: #fff!important;
    background-color: red!important;
  }
}
```
こういう事でしたでしょうか？変更しましたがこのcss自体が効かなくなりました。

こちらのサイトです。もし可能であれば見て頂けると助かります。難しいようでしたら今回は諦めます。

株式会社Via.Nova.Japan

test3.cheerswataru.com

♥ 0

いいねをした人: 居ません
2022年2月11日 11:49 PM #98741
GONSY
参加者

♥ 844
試してみましたが、こんな感じになれば良いのでしょうか？

ゴーストボタン hover 背景色変更デモ – Demo Site for SM

demo.gonsy.net

追加したのは以下です。
```
@media ( min-width: 1024px ) {

	.smb-btn {
		border-radius: 0 !important;
	}
	
	.smb-btn.smb-btn:hover {
		color: #fff!important;
		border-color: #2a2a2a !important;
		background-color: #2a2a2a!important;
	}

	.smb-btn.smb-btn:hover span.smb-btn__label {
		color: #fff !important;
	}

}
```
♥ 0

いいねをした人: 居ません
2022年2月14日 9:12 AM #98865

キタジマタカシ
参加者

♥ 2423

@入山航さん

こういう事でしたでしょうか？変更しましたがこのcss自体が効かなくなりました。

CSS はセレクタの入れ子はできないので、GONSY さんのような書き方になりますね。

解決した場合は解決した旨を書いて（修正が必要だった場合はどういう修正が必要だったかも書いて）クローズをお願いします。

♥ 0

いいねをした人: 居ません

2022年2月14日 9:47 AM #98886

ひろ
参加者

♥ 20

申し訳ありません！

なぜか返信コメントが送れておりませんでした。

結果GONSYさんの方法で解決する事ができました。

しかし今回My Snow MonkeyにてScssを使用しておりましたので、なぜ入れ子構造だと作用しなくて、GONSY さんの方法だと作用したかはわかりませんでした。

いずれにせよ解決できました。

ありがとうございます。

♥ 1

いいねをした人:
投稿者

投稿