Encountering a problem with the CSS property pointer-events:none;. It seems to be functioning correctly in modern browsers like Chrome and Mozilla, but is causing issues in Internet Explorer.
Any suggestions for resolving this issue?
Thank you
Encountering a problem with the CSS property pointer-events:none;. It seems to be functioning correctly in modern browsers like Chrome and Mozilla, but is causing issues in Internet Explorer.
Any suggestions for resolving this issue?
Thank you
Original Source
The use of pointer-events is considered a Mozilla hack, and although it has been implemented in Webkit browsers, it may not work as expected in IE11.
Fortunately, I have come across a solution:
Forwarding Mouse Events Through Layers
This method utilizes a plugin that leverages certain lesser-known JavaScript properties to redirect mouse events to another element.
Another alternative JavaScript solution can be found here.
For browsers like IE and Opera, you can achieve similar functionality by simply setting a specific cursor style on an element:
a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
cursor: default;/*plain arrow*/
text-decoration: none;/*No underline or something*/
color: #07C;/*Default link colour*/
}
By using this approach, you should get results comparable to those achieved with pointer-events: none;
In my React JS file, I have a map function that I am using to populate a select dropdown with options. const options = response.map(k => ({ value: k.id, label: k.description ? `${k.name} - ${k.description}` : k.name, })); I ...
Struggling to design a navbar using Bootstrap and have a div positioned underneath it that fills the remainder of the page? You're not alone! As someone new to Bootstrap and CSS, this can be tricky. Here's an example of how I created a navbar: ...
I included a close button in my form, but it doesn't seem to be working. Do I need to use JavaScript for this? <button type="button" class="close" data-dismiss="form" aria-label="Close"><span aria-hidden="true">×</span>& ...
I have successfully styled checkboxes with a background color, but now I want each checkbox to have a different color without having to rewrite a lot of code for each one. Check out the demo here .checkbox { display: inline-block; cursor: point ...
I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page). https://i.sstatic.net/maDzc.png This is the HTML code I am usin ...
https://i.sstatic.net/GVcgu.png I am new to working with Angular and currently, I have a sidenav container with the content being a mat toolbar. My issue is that when viewed on a full-sized desktop, the background color of the toolbar stretches and fills t ...
Here is the code snippet I am working with: <!DOCTYPE html> <meta charset="utf-8"> <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css"> <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"& ...
Within a div with text-align:center, I have multiple same-size blocks set to display:inline-block. | _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____ ...
I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...
Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...
The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...
How can I prevent the image in this row from getting a margin at the bottom when I resize the window? <div class="row-fluid"> <div class="span2"> <img src="https://s3.amazonaws.com/media.jetstrap.com/SLgRUEHSyGwQVfG4x6ed_curso_a ...
Recently diving into Angular, I came across a stumbling block while working through the hero tutorial. The error message that popped up was: Type 'Event' is not assignable to type 'string' You can see the error replicated here. ...
I am currently utilizing Bootstrap select dropdown, however, I am looking to customize its appearance to match the image provided below without the need for additional plugins. I have attempted a few methods but none have been successful. The new dropdown ...
Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges. Here is how I've set it up: HTML <input type="text" id="search-input" placeholder=&quo ...
I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...
I came across this stunning ring with a captivating smoke animation, but I am struggling to comprehend its design fully. My goal is to resize the ring to about 80px and maintain only a single color throughout. However, my attempts to simply reduce the siz ...
Imagine this scenario: var x = 2.175; console.log(x.toFixed(2)); // 2.17 It may seem surprising, but it's actually expected behavior. The Number literal 2.175 is stored in memory slightly less than the actual value due to IEEE-754 rules. This can b ...
I have been developing a Windows application that utilizes the WebBrowser control to automate form filling based on specific criteria. One challenge I encountered is with dates on certain forms, where different rules apply depending on the day of the week. ...
Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...