[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。
![[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/3abe6226aaa63d2d34d23f22fd074a83c59dc310/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072601.png)
【IE11対応】position sticky でスクロール中に固定表示する方法 | 実践的Web開発メソッド
スクロール量に応じて、要素を特定の位置に固定表示する方法をご紹介します。 数年前は、Javascriptを利用して、スクロールの量に応じてCSSのposition fixedを付け外しするような事をやっていましたが、position stickyを利用すると簡単に実装することが出来ます。 こちらにPosition Stickyのデモを作成しました。 メディアなどでよく見かけるような、スクロールしてもサイドバーが固定表示されるUIです。 position stickyとはMDN Web Docs によると、下記のように説明されています。 包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
