[shone]

【お使いの Snow Monkey のバージョン】20.0.1
【お使いの Snow Monkey Blocks のバージョン】 19.0.1
【お使いの Snow Monkey Editor のバージョン】9.2.0
【お使いのブラウザ】chtome
【当該サイトのURL】

 

いつも大変んお世話になっております。

表題の件につきまして、「バナー」のマウスオーバー時の挙動を変更したいと考えています。

 

デフォルトではバナーにマウスオーバーした際、画像が暗くなると思うのですが、これを解除し、かつ設定しているマスクも解除し画像本来の明るさになるよう設定したいです。

具体的には下記サイトの「呼吸」「感覚」…の部分のようなイメージです。

 

ASI｜感覚運動科学に基づいた教育カリキュラム

あらゆる運動を構成する感覚神経系と運動神経系の双方を学ぶ、感覚運動科学に基づいた教育カリキュラムです。

 

マウスオーバー時にマスクを解除するので:hoverで

.smb-items__banner:hover {
--smb-items--banner--mask-color: initial !important;
--smb-items--banner--mask-opacity: initial !important;
}

 

のような感じでいけるかなと思ったのですが、上では自分で設定したマスク部分は解除されているようなのですが、デフォルトで設定されている暗くなる挙動？が解除できず…一瞬明るくなっても結果的にはデフォルトの暗くなる仕様が優先されているようで、暗くなってしまいました。

デフォルトのマウスオーバー時の仕様も解除したかったのですが、どのように指定されているのかもわからなかった（見つけられなかった）ため質問させていただきました。

 

マウスオーバー時にデフォルトの暗くなる効果・及び自分で設定したマスクを解除し、画像本来の明るさにする、といった挙動にするためにはどのように記述すれば良いでしょうか？

アドバイスいただけますと幸いです。

♥ 0

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

[GONSY]

該当箇所の 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;
}

自身で設定したマスクに上記が適用されるかは不明ですが、デフォルトのものでいったんお試しください。

♥ 1

いいねをした人:

[shone]

>GONSYさん

 

アドバイスありがとうございます。

いただいたコードを元に数値を100%にすることで画像本来の明るさに戻す処理ができました！ありがとうございます！

 

解決しましたのでトピック閉じさせていただきます。

♥ 0

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

[投稿者]

投稿