来自 JavaScript 文件的伪类实现...当被指针事件属性阻止时

Question

我有一个cssclass"buttonClass"。我有一些伪classes，注意："buttonClass:hover".

在一个案例中，我使用了两个不同的图像，悬停功能可以在图像之间切换。

在另一种情况下，我使用的是 sprite 样式图像，伪 class 应该适当调整背景位置。

当我使用对象定位时，悬停功能在 Chrome 中运行良好，但在 IE11 中不起作用，只是发现 IE 不支持对象定位。

所以我切换到背景位置。在调试器中，切换位置值可以获得我需要的效果，但由于某种原因，在按钮所在的模态 window 中，悬停功能不起作用。

类是：

.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 文件摘录：

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

其他尝试在 JavaScript 中使用了以下内容但无济于事：

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

添加断点没有效果...因为代码从未实现，但是，如果 div 标记，则更改 JS 文件和 css 中的值确实会影响内容用作按钮。

我尝试过的网站： 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

不幸的是，我正在使用的代码已经存在并且太大而无法粘贴微型功能块。我正在尝试对其进行调试，以便功能正常工作 "as advertised" 可以这么说。

答案可以是直接建议的形式，也可以是对网站的引用，或者由于我的特定查询格式而错过的已经回答的问题。

Answer 1

抱歉，这不是伪 class 或浏览器问题。这是一个继承问题。该按钮从几个div继承了一个pointer-events:none属性。所以添加 pointer-events:all 到按钮 class 解决了悬停问题。

来自 JavaScript 文件的伪类实现...当被指针事件属性阻止时

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

html

javascript

css

pseudo-class

internet-explorer-11