何をしてあげられるという訳じゃないBlog微かな戸惑いをそっと吐きだすまりーのブログ。itある2枚の画像をCSSで重ねて1枚の画像のようにしたとき、そのうちの1枚だけを選択する方法を紹介します。バックアップを取って自己責任でお願いします。何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。いうことかというと、例えば、下記の画像は、草原の背景写真に、馬のシルエット画像を重ねています。このとき、馬だけを選択できるようにします。今回は馬にマウスオーバーしたとき、馬だけが少し透明になるようにしています。画像の重ね方は、ここで説明すると長くなってしまいますので、はしょりますが、position:relativeとposition:absoluteで画像や文字を重ねてみようを参考にさせていただきました。pointer-eventsで解決お恥ずかしながら、初めて知った「pointer-events」というプロパティを使うことで、あっさりと解決できてしまいました。pointer-eventsプロパティとは、簡単にいえば、マウスでクリックしたりドラッグしたり、オンマウス状態のときの動作、またスマホなどでしたらタップするといった操作をコントロールするCSSです。このpointer-eventsに「none;」を指定することで、クリックやオンマウス時の動作を無効にします。}class名は好きにつけてもらって大丈夫です。この「class=nothover」を、マウス動作が反応してほしくないところに指定します。今回の場合ですと、背景写真ですね。関連記事FireFoxでCSSが反映されていないという事象コメントトラックバックは利用できません。(0)この記事へのコメントはありません。返信をキャンセルする。-URLトップページに戻るサイト内検索おすすめ記事2014.5.12TCDテンプレート「AN」をカスタマイズして内部SEOを行うTCDテンプレート「AN」での、見出しタグの使い方が気になったので、カスタマイズして使っています。2015.1.21AN(tcd014)の固定ページにアイキャッチを入れる方法AN(tcd014)では、投稿ページにのみアイキャッチを設定できます。固定ページ...2014.8.18TCDテンプレートでヘッダーロゴの画像をスマホでも表示させるこのサイトで使用しているTCDテンプレート「AN」では、ヘッダーロゴの画像はスマ...2015.3.9AN(tcd014)のグローバルメニューやスライダーの背景などをカスタマイズするAN(tcd014)で、グローバルメニューやスライダーなど、ヘッダー付近の背景を...2015.3.23~TCD~投稿ページ・固定ページの記事タイトルやページ内で使うhタグをデザインするAN(tcd014)の投稿ページと固定ページの記事タイトルには、h2の見出しが使...ページ上部へ戻る当サイトについてこのサイトは、私が興味を持っている事、学んだ事、またオススメしたいものなどを書いています。「ちゃんと覚えてるんだ」と言えるように、備忘録的なことも書いていきます。更新スピードはトボトボです。プロフィールHN:まりーコーヒーを相棒にしてアフィリエイトをしています。お世辞にも面白いとは言えないブログですが、書かせてちょうだいよ、いいね。