Css нажать сквозь элемент

How to Click Through a div to its Underlying Elements

Imagine that you have a div the background of which is transparent, along with border. Under this div, you have other different elements. You want to click on these underlying elements through the div. This causes problems for most developers, as they can click underlying elements only in case of clicking the outside of the overlay . If you have such a problem, then this snippet is for you. Let’s dive in and try to do it together.

Add HTML

Add CSS

• You can solve this problem using the “none” value of the CSS pointer-events property. In the case of using this value, the element will not react to the pointer-events.
• With the help of the CSS background property put your transparent background.

pointer-events: none; background: url(background);

Example of clicking through a div to its underlying elements:

Using the AlphaImageLoader filter, you can even put a transparent PNG or GIF in the overlay div and click it through a div.

Example of using the AlphaImageLoader filter:

Another way of solving this problem is disabling pointer-events in a parent element, leaving it enabled for its child elements. This is beneficial when you work with various overlapping div layers, where you want the child elements to react pointer-events, but the parent elements — no.

Here you need to use the “none” value of the pointer-events property for the parent div, and the “auto” value for the child div.

Example of the pointer-events property with the “none” and “auto” values.

.parent < pointer-events:none; > .child < pointer-events:auto; > div ul >0 parent"> li child">li> li child">li> ul> ul >1 parent"> li child">li> li child">li> ul> div>

Источник

How to Click Through an Element on Web

I’ve been working on the Content Management System for YouVersion Stories. Think something like the fun and interactive Instagram stories, but with a focus on helping people seek intimacy with God every day. In the CMS, I have a preview of the story, so that the admin can see exactly what the story will look like on a device. It did almost everything that the client apps did besides one big thing: navigate between story modules with a tap. I want to be able to navigate between story modules, while also being able to interact with some elements on the module. The tap navigation works like this. Left side: go back. Middle: go forward. Right side: go forward. See the images above. This shows the tap navigation panels. In its current state, if I clicked the reflective answer button «Loving my neighbors», what would happen? I’ll give you a second to think. It would navigate to the next module of the story, instead of selecting that answer button. If only there was a way where I could click through that element to get to the button. CSS pointer-events are here to save the day!

How do I do it?

The layers of the story go like this: tap navigation > story module. The story module is on top of the navigation. That means it covers the entire tap navigation. On the story module, I added one simple line of CSS.

.story-module  pointer-events: none; > 

That means that any mouse/touch event will go through that element to the next one underneath it. This gives us full access to the tap navigation! There’s still one problem. Nested in the story module are the answer buttons that I wanted to tap, but since all mouse/touch events go to the tap navigation, clicking on an answer won’t work. It’ll only progress the story to the next module. To fix this, just add back the pointer event to the buttons.

.story-module .btn-answer  pointer-events: auto; > 

Viola! Now, we can easily tap the buttons when needed, and then anywhere else on the story to navigate between modules 😄 Check out Stories in the Bible app at https://bible.com/stories

Additional Resources

Источник

Click Through div to Underlying Elements – CSS

Developers can utilize other various elements under a div container. Suppose you want to click on any underlying items that are accessible via the div. Most developers will have severe issues because they can only click underlying items if they click the outer side for the overlaying in the div. To handle such a situation, go for the option of clicking through the created div.

This post will explain the method for clicking through the div to underlying the elements in CSS.

How to Click Through div to Underlying Elements in CSS?

To click through a div to underlying elements in CSS, first, create a main div with a particular name and add an “ ” element for defining the hyperlink, which is utilized for linking from one page to another. Then, insert an “” tag following the same procedure and specify a class name.

Step 1: Create a div Container

First, utilize the “ ” element for creating a “div” container in an HTML file. Then, specify an “id” inside the “div” opening tag with a particular value.

var listener = function(e) < iframe.postMessage(, '*'); > domElement.addEventListener('mousedown', listener); domElement.addEventListener('mouseup', listener) domElement.addEventListener('mousemove', listener);

window.addEventListener('message', function(e) < var event = document.createEvent ('MouseEvents'); event.initMouseEvent(e.data.type, true, true, window, 1, null, null, e.data.x, e.data.y, false, false, false, false, 0, null); domElement.dispatchEvent(event); >)

// Укажи селекторы через запятую $("button, a").click(function()< // Do smth >);

$(document).on('click', '.myClass', function(e)< // . >); $(document).on('click', '.myOtherClass', function(e)< // . >);

background:white; opacity:0; filter:Alpha(opacity=0);

background:url('transparent.png'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod='scale'); background:none !important;