- このトピックには2件の返信、2人の参加者があり、最後に
により1年、 7ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】20.0.1
【お使いの Snow Monkey Blocks のバージョン】 19.0.1
【お使いの Snow Monkey Editor のバージョン】9.2.0
【お使いのブラウザ】chtome
【当該サイトのURL】いつも大変んお世話になっております。
表題の件につきまして、「バナー」のマウスオーバー時の挙動を変更したいと考えています。
デフォルトではバナーにマウスオーバーした際、画像が暗くなると思うのですが、これを解除し、かつ設定しているマスクも解除し画像本来の明るさになるよう設定したいです。
具体的には下記サイトの「呼吸」「感覚」…の部分のようなイメージです。
マウスオーバー時にマスクを解除するので:hoverで
.smb-items__banner:hover { --smb-items--banner--mask-color: initial !important; --smb-items--banner--mask-opacity: initial !important; }のような感じでいけるかなと思ったのですが、上では自分で設定したマスク部分は解除されているようなのですが、デフォルトで設定されている暗くなる挙動？が解除できず…一瞬明るくなっても結果的にはデフォルトの暗くなる仕様が優先されているようで、暗くなってしまいました。
デフォルトのマウスオーバー時の仕様も解除したかったのですが、どのように指定されているのかもわからなかった（見つけられなかった）ため質問させていただきました。
マウスオーバー時にデフォルトの暗くなる効果・及び自分で設定したマスクを解除し、画像本来の明るさにする、といった挙動にするためにはどのように記述すれば良いでしょうか？
アドバイスいただけますと幸いです。
いいねをした人: 居ません該当箇所の
hoverにはfilter:brightness(80%)が指定され、それで画像を暗くしていると思います。.smb-items__banner:active .smb-items__banner__figure, .smb-items__banner:focus .smb-items__banner__figure, .smb-items__banner:hover .smb-items__banner__figure { filter:brightness(80%) }ここを
2００%などにすれば、マウスを当てた際に明るく変化すると思います。
また、コードを見るとhover前のimgにはopacity: 0.6が適用されているように思いますので、hoverした際に画像本来の色に戻してあげるほうが良いかもしれません。.smb-items__banner:active .smb-items__banner__figure > img, .smb-items__banner:focus .smb-items__banner__figure > img, .smb-items__banner:hover .smb-items__banner__figure > img { opacity: 1 !important; }自身で設定したマスクに上記が適用されるかは不明ですが、デフォルトのものでいったんお試しください。
いいねをした人:
- トピック「「バナー」のマウスオーバー時のマスクを解除したい」には新しい返信をつけることはできません。