- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 9ヶ月前に更新されました。
-
投稿
-
【お使いの 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;になっておりましたのでこれが原因なのかなと思いました。この打ち消し方がわかりませんでした。
どうぞよろしくお願い致します。
いいねをした人: 居ません基本的にゴーストボタンは中が透明であるべきということで
!importantがついています。.smb-btnより強いセレクタで指定することで上書きできるので、例えば.smb-btn.smb-btn:hoverにしてbackground-color: red!important;とすると上書きできないですかね？いいねをした人: 居ません違う意味でしたでしょうか？
はい。セレクタの詳細度が弱い可能性があるので、
.smb-btn:hoverを.smb-btn.smb-btn:hoverと変更して詳細度を上げたら上書きできないですか？と書きました。それでもダメなら他の部分に間違いがある可能性もあるので、実際のページを見てみないとわからないかもです。
いいねをした人: 居ません試してみましたが、こんな感じになれば良いのでしょうか？
追加したのは以下です。
@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; } }いいねをした人: 居ません@入山航さん
こういう事でしたでしょうか？変更しましたがこのcss自体が効かなくなりました。
CSS はセレクタの入れ子はできないので、GONSY さんのような書き方になりますね。
解決した場合は解決した旨を書いて（修正が必要だった場合はどういう修正が必要だったかも書いて）クローズをお願いします。
いいねをした人: 居ません
- トピック「ボタンのhover時にエフェクトをつけたい」には新しい返信をつけることはできません。