misallychan.com

雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。

要素が下のリンクを適応させクリックできるようにする方法

下の要素がリンクで、その上に画像をあわせたりした場合などに、リンクが効かなくなる問題を解消します。


 
最近私が躓いた部分なのですが、あまりにも簡単に解決できて驚いたので、もし、、、万が一・・・悩んでる方がいたらぜひお試しください。 









 

z-indexやpositionで要素を重ねたときの話

position:absoluteは親要素に対して、小要素の位置を調整できるのでなかなか便利ですよね。
レスポンシブサイトにした今でも、使う箇所があります。




例えばランキング

ランキング一覧みたいなページを作る時。
リンクが適応されたサムネイルの上に、順位を重ねませんか?
レスポンシブでは絶対値はあまり使わないイメージですが、こういったシーンではとても役立ちます。




上に重ねた要素が邪魔してリンクが押せない問題

さて、そんなランキングの表示では、
サムネイルを押したら別のページに飛ばしたいのに…


f:id:misallychan:20180726165050p:plain


この、上に重ねた要素(順位の部分)が邪魔をして、
サムネイルのリンクが押せなかったりします。


もちろんaタグの中に、サムネも順位も入れていれば大丈夫なのですが
今回はループの問題もあり、順位画像をaタグの外に吐き出していたため
サムネイルリンクの邪魔をされる形になりました(´・ω・`)



透過PNGを上に重ねて、それっぽく見せるリンク

 f:id:misallychan:20180726153438p:plain


あとは、こんな感じでリンクボタンの上に絵を重ねて、リンクを豪華に見せたい!
透過部分の後ろでリンクが見えて、そのリンクを押したい!
みたいなときがあって。
(この例だとはんぱなくしょぼいですがw)


透過してたらリンクも透過されるわけもなく…
画像が邪魔してリンクは押せません。。




しかし!!



上の要素に一行追加するだけで解決!!

なんと、一行でこの
「下の要素がリンク、上に別の要素を重ねた時、リンクに遷移しない問題」
を解決することができたのです。。
 


pointer-events: none;

リンクの上に重ねている要素に

pointer-events: none;



こちらを追加します。
ハイ終わり。
こちらでマウスイベントの発生が制御されました。
なので、上の要素へのクリックなどが関係なくなり、下の要素をクリックできる、つまりリンクに飛べるわけです。




たった一行で、要素が下のリンクを最強にすることができました。
お試しあれ〜〜〜。