PseudoClass implementation from JavaScript file...when blocked by pointer-events attribute

Question

I have a css class "buttonClass". I have a few pseudo-classes, of note: "buttonClass:hover".

In one case I have used two different images, and the hover feature works at switching between images.

In another case I'm using sprite style images and the pseudo class should adjust the background position appropriately.

When I used object-position the hover feature worked great in Chrome, but wasn't working in IE11, just to find out that IE doesn't support object-position.

So I switched to background-position. In the debugger switching the position values gets me the effect I need, but for some reason in the modal window where the button is, the hover feature is not working.

Classes are:

.buttonClass {position:absolute; bottom:15px; left:340px; background-position:0 0; background-repeat: no-repeat; width:118px; height:60px; } 
.buttonClass:hover {position:absolute; bottom:15px; left:340px; background-position:-120px 0; background-repeat: no-repeat; width:118px; height:60px;

JavaScript file excerpt:

g = document.createElement('button'); g.className = 'buttonClass';

Other attempts have used the following in the JavaScript to no avail:

g.onmouseover = function () {
                g.classList.remove("buttonClass")
                g.classList.add("buttonClass:hover")
            }
g.onmouseout = function () {
                g.classList.add("buttonClass")
                g.classList.remove("buttonClass:hover")
            }

Adding a breakpoint has no effect...as thought the code is never implemented, However, changing values in the JS file and in the css does impact the contents if the div tag being used as a button.

Sites I've tried: https://www.quora.com/Can-I-add-the-hover-pseudo-class-to-an-element-using-JavaScript

Setting CSS pseudo-class rules from JavaScript

https://www.w3schools.com/css/css_pseudo_classes.asp

Unfortunately, the code I'm working with is already existent and too large to paste a miniature functional piece. I'm trying to debug it so the features work "as advertised" so to speak.

Answers can come in the form of direct suggestions or references to sites or already answered questions that I've missed due to my particular formatting of inquiry.

Answer 1

Sorry, this wasn't a pseudo-class or browser issue. It was an inheritance issue. The button inherited from several divs up a pointer-events:none attribute. So adding pointer-events:all to the button class resolved the hover issue.