Here's the structure I'm working with:
<div class='offline'>some text <button class='delete'>Delete</button></div>
I want to disable the div using pointer-events: none, but still keep the button active. Is this possible?
I attempted to do this with the following code:
div.offline:not(.delete) {
pointer-events: none;
}
Unfortunately, this did not work. Any suggestions or ideas on how to achieve this?
To prevent events from triggering on the parent element and allow them to trigger on the child element, you can adjust the pointer-events CSS property.
.parent {
pointer-events: none;
}
.child {
pointer-events: auto;
}<div class='parent'>
foo
<button class='child'>bar</button>
</div>Consider the following scenario:
div.offline:not(.delete) {
pointer-events: none;
}
This targets div elements with the class offline that do not have the class delete.
Because your only div does not possess a delete class, it is affected.
If you wish to target all child elements of div.offline without the delete class, you can use this code snippet:
div.offline :not(.delete) {
pointer-events: none;
}
However, this may exclude text nodes, allowing both "some text" and the delete button to still receive events.
Your best option would be to set a default style for the parent element, which can then be overridden by the child element:
div.offline {
pointer-events: none;
}
div.offline .delete {
pointer-events: auto;
}
When using the pointer-events: none; property, the element itself will not be the target of mouse events. Instead, its descendant elements may still receive mouse events if their pointer-events attribute is set to a different value. In this case, mouse events will trigger event listeners on the parent element as needed during the event capture or bubble phases.
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Note the emphasis added above.
So basically descendants should still have those events if you set them:
.offline .delete {
pointer-events: auto;
}
I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...
I am utilizing a service that provides me with dynamic HTML containing labels and inputs as shown below: input:after { content: "\a"; white-space: pre; } <label for="username">Username</label> <input type="text" id="username" nam ...
Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...
Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...
I'm working on bringing to life a concept that I've been envisioning. The design would feature a long scrolling page with a unique navigation bar behavior. The idea is for the navigation bar to initially start at the bottom of the screen and the ...
Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...
Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...
I have two files, home.html and mobilehome.html, and I am trying to switch between them when the screen width goes below a certain size. if (screen.width <= 600) { document.location = "HomeMobile.html"; } This approach works well in Respon ...
Seeking advice on customizing the look of a MenuItem in PrimeNG. Here's what I have attempted so far: <p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu> ...
I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...
This particular issue has me completely baffled. Normally I can navigate through most IE7 CSS bugs with some clever adjustments here and there, but this one has really stumped me! Take a look at the example page in IE7 and you'll notice that when hov ...
I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...
I'm attempting to achieve a similar effect as demonstrated in this Stack Overflow post, but within the context of AngularJS. The goal is to trigger a 180-degree rotation animation on a button when it's clicked – counterclockwise if active and c ...
After trying various solutions like "background-clip: padding-box;" to address the issue of background color bleeding outside of the border, I'm still not completely satisfied with the result. Is there a more effective fix for this problem? Check out ...
I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this: <ul id="demo23" class="collapse"> <li> <a [routerLink]="['image-gallery','Picasso ...
One of my tasks is to extract information from a webpage on Rotten Tomatoes. This is the screenshot of the page https://i.sstatic.net/i3gwp.png Based on the image, it seems that span class= descriptor is the parent class of a class, and div class = info ...
I'm struggling with a problem in HTML where the initial-scale function is not working as expected. When I zoom in on certain pages, it saves the zoom level. However, when I navigate to another page and then return to the original one, the zoom level r ...
Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...
Is there a method to incorporate additional fields, such as a description, in addition to the name and start/end time for an event on the v-calendar's day view? ...
I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...