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

0
いいねをした人: 居ません
  • このトピックには7件の返信、3人の参加者があり、最後にゆうとにより2年、 1ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #98129
    ゆうと
    参加者
    14

    【お使いの 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
    いいねをした人: 居ません
    #98211
    キタジマ タカシ
    参加者
    2227

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

    0
    いいねをした人: 居ません
    #98632
    ゆうと
    参加者
    14

    キタジマさん

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

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

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

     

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

    が効果なしでした。

     

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

    0
    いいねをした人: 居ません
    #98644
    キタジマ タカシ
    参加者
    2227

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

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

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

    0
    いいねをした人: 居ません
    #98721
    ゆうと
    参加者
    14
    .smb-btn {
      .smb-btn.smb-btn:hover {
        color: #fff!important;
        border-color: #fff!important;
        background-color: red!important;
      }
    }

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

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

    0
    いいねをした人: 居ません
    #98741
    GONSY
    参加者
    803

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

    追加したのは以下です。

    @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
    いいねをした人: 居ません
    #98865
    キタジマ タカシ
    参加者
    2227

    @入山航さん

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

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

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

    0
    いいねをした人: 居ません
    #98886
    ゆうと
    参加者
    14

    申し訳ありません!

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

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

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

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

    ありがとうございます。

    1
    いいねをした人:
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「ボタンのhover時にエフェクトをつけたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。