0

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.

wolfsshield
  • 757
  • 5
  • 14
  • The browser will set these pseudo classes itself. – Kaiido Aug 13 '19 at 23:04
  • @Kaiido The problem is that when I'm using background-position in the class it does not set the pseudo class in either IE or Chrome, but when I use object-position in conjunction with an img element it works in Chrome but not in IE. – wolfsshield Aug 13 '19 at 23:40
  • Show this then and mark as [css]. All we need is a minimal html structure and the css that does set the background. You can make live snippets by clicking the <> icon in the question's [edit] mode. – Kaiido Aug 14 '19 at 00:11
  • I tested with your js and css snippets and the `background-position` works well with pseudo classes in IE. You could check my sample: https://jsfiddle.net/yuzhou0602/a4wL8cs1/4/. The sprite style images' position changes when hovering. How do you set the background image of the button? It is better that you could provide a simple sample which reproduces the issue so that we'll have a better understanding of the issue. – Yu Zhou Aug 14 '19 at 03:02
  • @YuZhou After further experimentation on much simplified stuff I was seeing the hover function correctly. So I thought it might be a z-index issue, which led my to checking other parent element attributes until I found the pointer-events was set to none. – wolfsshield Aug 14 '19 at 03:30

1 Answers1

0

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.

wolfsshield
  • 757
  • 5
  • 14