{"id":1234,"date":"2023-02-07T20:39:11","date_gmt":"2023-02-08T01:39:11","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=1234"},"modified":"2024-07-31T14:12:09","modified_gmt":"2024-07-31T18:12:09","slug":"pointer-events","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2023\/pointer-events\/","title":{"rendered":"pointer-events"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What<\/h3>\n\n\n\n<p>How to click, tap or select one HTML object through another.<\/p>\n\n\n\n<p><strong>For example:<\/strong> I had an image and I wanted to show a caption and a link to the photographer on hover, but I also wanted the image to be clickable to open a bigger version in a modal\/lightbox. <code>pointer-events<\/code> makes that possible.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">How<\/h3>\n\n\n\n<pre title=\"Example HTML\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;div class=\"item-wrapper\"&gt;\n    &lt;figure&gt;\n        &lt;a href=\"\/big-image.jpg\"&gt;&lt;img src=\"\/small-image.jpg\" \/&gt;&lt;\/a&gt;\n    &lt;\/figure&gt;\n    &lt;div class=\"item-info\"&gt;\n        &lt;h1&gt;Title of the Image&lt;\/h1&gt;\n        &lt;p class=\"img-credit\"&gt;by &lt;a href=\"https:\/\/link-to-artist.com\"&gt;Name of Artist&lt;\/a&gt;&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre title=\"Example CSS\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.item-wrapper {\n\tbox-sizing: border-box;\n\theight: 225px;\n\tposition: relative;\n\twidth: 300px;\n}\nfigure,\nh1 {\n\tmargin: 0;\n}\n.item-info {\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tleft: 0;\n\tpadding: 1rem;\n\tpointer-events: none; \/* keeps the image clickable *\/\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n}\n.img-credit {\n\tmargin-bottom: 0;\n\tpointer-events: auto; \/* makes the link clickable *\/\n}\n.item-info a {\n\tcolor: white;\n}\n\n@media (min-width: 769px) {\n\t.item-info {\n\t\tbackground: rgba(0, 0, 0, 0.5);\n\t\topacity: 0;\n\t\ttransition: opacity 1s ease;\n\t}\n\t.item-wrapper:hover .item-info {\n\t\topacity: 1;\n\t}\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>(Clicking on the photo will just open the photo, not a modal in this case.)<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWBdKVR\" src=\"\/\/codepen.io\/anon\/embed\/MWBdKVR?height=350&amp;theme-id=1&amp;slug-hash=MWBdKVR&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWBdKVR\" title=\"CodePen Embed MWBdKVR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Where<\/h3>\n\n\n\n<p>More info at <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/pointer-events\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Web Docs<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Thoughts<\/h3>\n\n\n\n<p>I couldn&#8217;t believe how much this one line of CSS solved. So easy.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What How to click, tap or select one HTML object through another. For example: I had an image and I wanted to show a caption and a link to the photographer on hover, but I also wanted the image to be clickable to open a bigger version in a modal\/lightbox. pointer-events makes that possible.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[25,17,77],"class_list":["post-1234","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-codepen","tag-css","tag-mdn-web-docs","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/1234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=1234"}],"version-history":[{"count":3,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/1234\/revisions"}],"predecessor-version":[{"id":1269,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/1234\/revisions\/1269"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=1234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=1234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=1234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}