1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
<link rel="stylesheet" href="/assets/main.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interacting with underlying element in HTML</title>
<meta name="og:site_name" content="Navan Chauhan" />
<link rel="canonical" href="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
<meta name="twitter:url" content="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html />
<meta name="og:url" content="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
<meta name="twitter:title" content="Interacting with underlying element in HTML" />
<meta name="og:title" content="Interacting with underlying element in HTML" />
<meta name="description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
<meta name="twitter:description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
<meta name="og:description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
<link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
<meta name="twitter:image" content="https://web.navan.dev/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png" />
<meta name="og:image" content="https://web.navan.dev/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png" />
<meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k" />
<script data-goatcounter="https://navanchauhan.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
<script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script>
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<center><nav style="display: block;">
|
<a href="/">home</a> |
<a href="/about/">about/links</a> |
<a href="/posts/">posts</a> |
<a href="/3D-Designs/">3D designs</a> |
<!--<a href="/publications/">publications</a> |-->
<!--<a href="/repo/">iOS repo</a> |-->
<a href="/feed.rss">RSS Feed</a> |
</nav>
</center>
<main>
<h1>Interacting with underlying element in HTML</h1>
<p>I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.</p>
<div class="codehilite">
<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"content flex flex-wrap content-center justify-center"</span><span class="p">></span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"iphone-12-white.png"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-[60vh] z-10 absolute"</span><span class="p">></span>
<span class="cm"><!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">--></span>
<span class="p"><</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">"screenrec.mp4"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-[57vh] mt-4 mr-1 rounded-[2rem]"</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">></</span><span class="nt">video</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</code></pre>
</div>
<p><img src="/assets/underlying/video-under-element.jpg" alt="Video Under a Transparent Image" /></p>
<p>Turns out, you can disable pointer events!</p>
<p>In Tailwind, it is as simple as adding <code>pointer-events-none</code> to the bezel screen.</p>
<p>In CSS, this can be done by:</p>
<div class="codehilite">
<pre><span></span><code><span class="p">.</span><span class="nc">className</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="k">pointer-events</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span>
<span class="p">}</span>
</code></pre>
</div>
<p>Let us try this in a simple example.</p>
<h2>Example</h2>
<p>Here, we create a button and overlay a transparent box</p>
<div class="codehilite">
<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;"</span><span class="p">></span>
A box with 200px height and 200px width
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px;"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></span>
</code></pre>
</div>
<hr>
<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
A box with 200px height and 300px width
</div>
<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
<hr></p>
<p>As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding <code>pointer-events: none</code> to the box. </p>
<div class="codehilite">
<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;"</span><span class="p">></span>
A box with 200px height and 300px width
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</code></pre>
</div>
<hr>
<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
A box with 200px height and 300px width
</div>
<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
</div></p>
<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
<script data-isso="https://comments.navan.dev/"
src="https://comments.navan.dev/js/embed.min.js"></script>
<section id="isso-thread">
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
</main>
<script src="assets/manup.min.js"></script>
<script src="/pwabuilder-sw-register.js"></script>
</body>
</html>
|
