I have a container div that holds all of my website's content. I want this container to change the cursor to a pointer when clicked on, but I don't want the elements inside the container to inherit this cursor style:
https://i.sstatic.net/8joJo.png
To achieve this, I set the container to have cursor: pointer, and the inner content to have cursor: auto. This solution works well in most browsers, however, it fails in Internet Explorer (specifically IE11). The problem in IE is that setting cursor: auto within an element does not reset the cursor to its default state, but rather inherits the parent's cursor style (refer to cursor:auto behaviour in IE 8 and 9). Therefore, in IE, everything appears as clickable due to the constant display of the pointer cursor.
The suggested workaround from the linked answer involves setting the inner content area to have cursor: default to convert the pointer cursor back to a regular one. However, this method results in text displaying using the default cursor instead of the expected text selector. Is there a simpler solution to this issue other than manually specifying each individual element within the content area to restore their default cursors?
.wrapper {
cursor: pointer;
}
.content {
cursor: default;
}
.content p, .content h1, .content h2.... {
cursor: text;
}
.content a {
cursor: pointer;
}
etc.....