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;
}
It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...
I'm struggling to achieve a simple layout using flexbox, and I can't figure out how to do it. My objective is to have 3 divs aligned in a row, with the middle div (containing "short") centered. A visual representation would make it clearer: The ...
Hello everyone, this is my first time posting on stackoverflow. I have a question about centering the select options. Could someone please take a look at the image attached and let me know if it's possible? <select multiple="multiple" nam ...
My menu displays a .png file with smooth edges in most browsers, but in Internet Explorer it appears with rough edges. Can someone help me understand why IE treats .png files differently compared to other browsers? <li> <a href="" onclick=" ...
Adapting from Less to Sass has been my current focus. I have defined responsive breakpoints in Less variables: /* Breakpoints */ @break1:~"(max-width: 570px)"; @break2:~"(min-width: 571px) and (max-width: 1002px)"; @break3:~"(min-width: 1003px)"; These ...
When using swiper, why does pagination display outside of the main section in Firefox when inserting slides with different content lengths? This issue seems to only occur in Firefox and not in other browsers like Chrome. I have noticed that using two boots ...
Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...
My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...
Check out this HTML snippet: <div class="last-minute"> <span>Modulo:</span>4-3-3<p>Mandorlini is hopeful to have Juanito Gomez and Cirigliano back in action after the break. There's no need to worry about Hallfredsson who was ...
I'm facing an issue with setting the default tab using easytabs. Currently, the second option is automatically selected as the default tab. Previously, I had successfully set the first tab (statistics) as the active tab but lost the file. Now, I am s ...
I'm currently developing an app that features a scrollable sidebarPanel alongside a mainPanel that can have varying heights, such as: library(shiny) ui <- fluidPage( headerPanel('Iris k-means clustering'), sidebarPanel(style = " ...
I am running into issues trying to align and float certain divs properly. Currently, I have two divs with images that are displaying correctly, and now I need to add two more divs with images that behave in the same way. Even though I attempted to use th ...
Trying to create a sliding menu bar (.top-bar) that activates when clicking an arrow (#hide), causing the arrow to also slide up and switch from an up arrow to a down arrow. Here is my unsuccessful attempt: $(document).ready(function(){ $("#hide").c ...
Can someone help me figure out how to keep an element open when another one is opened? Here is an example: https://getbootstrap.com/docs/4.0/components/collapse/ <div id="exampleAccordion" data-children=".item"> <div class="item"> & ...
Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...
Can text be wrapped in flex within a fixed width container? For example: img username added you as a friend Instead of: user added img name you as a friend I am able to achieve this if the image and 'a' were separat ...
Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. Ho ...
I have just started learning javascript and I am in the process of creating a website where users can change the background by simply clicking on a button. It's working perfectly fine so far, but I want to add another feature where the background imag ...
Is it possible to create a Bootstrap 3 carousel where the image changes when the mouse cursor hovers over the thumbnail under the carousel? Currently, I have a setup with the carousel and thumbnails below it. Typically in Bootstrap, the image changes autom ...
I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...