javascript - 在鼠标进入和离开 Canvas 形状时添加和删除类

Question

我试图在鼠标悬停在某个元素上时向该元素添加一个类，然后在鼠标离开时将其删除。它目前仅适用于在 js 中为其提供直接样式。

如下所示，我尝试了各种方法来做到这一点，但都遇到了一些问题。只有直接的样式更改才有效。在鼠标离开时，我做同样的事情，但删除了类(class)。鼠标悬停并离开检查 Canvas 元素。

poly.on('mouseover', function () {
                this.opacity(1);
                layer.draw();
                $('.' + this.name()).css({ backgroundColor: "#ffcc00" });
                //$('.' + this.name()).classList.add("textboxhighlight"); 
                //$('.' + this.name()).className += " textboxhighlight";  
                //$('.' + this.name()).addClass("textboxhighlight"); 
                //$('.' + this.name()).setAttribute("class", "textboxhighlight"); 
            });

我不确定问题是什么，因为我厌倦了添加类的各种方法，所有这些方法都有不同的问题。仅使用 this.addClass 是行不通的，因为它需要以 $('.' + this.name()) 开头，否则代码中的任何内容都不起作用，甚至不强制样式部分。 $('.' + this.name())引用元素中与poly同名的类名。

在 CSS 中:

.textboxhighlight {
    background-color: #ffcc00;
}

感谢您的帮助。

Answer 1

可能你必须在你的 css 类中使用 background-color: #red !important。查看工作示例 here