使用 JavaScript var 更改 :hover::before CSS 属性 [重复]答案

【问题标题】：Change :hover::before CSS property with JavaScript var [duplicate]使用 JavaScript var 更改 :hover::before CSS 属性 [重复]
【发布时间】：2021-07-30 03:56:54
【问题描述】：

通读此thread 后，我发现用户 ybentz 的答案似乎最适合我正在寻找的解决方案，就好像我确实让它工作一样，这将使我大大减少我的整体 JS 和 CSS。

基本上我有一个包含多个超级菜单项的标题，其中包含一个 li.class（子菜单），每个包含一个 a.class 元素。在悬停时::before 我试图根据滚动位置更新属性变量。但我收到以下错误：

(index):1591 Uncaught TypeError: Cannot read property 'setProperty' of 未定义

在（索引）：1591

在 NodeList.forEach ()

在（索引）：1591

我的代码如下所示；

HTML：

<a class="mega-menu-link"></a>

CSS：

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu a.mega-menu-link:hover::before {
    background-color: var(--mega-menu-link-background-color);
}

然后我尝试根据滚动位置更改 if else 中的属性。我首先在页面加载时设置我的颜色，因为滚动大于 0。我将忽略所有这些，因为该函数仅在下面的代码上中断。

/* var menuSlideColor = document.querySelectorAll('#mega-menu-primary .mega-menu-item > .mega-sub-menu .mega-menu-link'); */

var menuSlideColor = document.querySelectorAll('#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu a.mega-menu-link:hover::before');
    
menuSlideColor.forEach(function() {
    this.style.setProperty('--mega-menu-link-background-color', 'green');
});

if (currentScrollPos > 0) {
    menuSlideColor.forEach(function() {
        this.style.setProperty('--mega-menu-link-background-color', 'green');
    });
}

else {
    menuSlideColor.forEach(function() {
        this.style.setProperty('--mega-menu-link-background-color', 'white');
    });
}

我也尝试了以下方法。

menuSlideColor.forEach((mega-menu-link) => {
    mega-menu-link.style.setProperty('--mega-menu-link-background-color', 'white')
});

和

menuSlideColor.forEach((mega-menu-link) => {
    mega-menu-link.style.setProperty('--mega-menu-link-background-color', 'green')
});

我的代码有什么根本错误吗？

【问题讨论】：

所以我更改了以下内容和查询选择器，它清除了错误但仍然没有看到属性 var 正在更新。
感谢您链接答案。我将深入研究该线程并发布我的最终结果。

标签： javascript css css-selectors hover var

【解决方案1】：

使用此链接，我能够解决问题并使其按预期工作。

David Walsch Answer

:root {
--varMenuHoverColor: value;
--greenColor: #78a300;
--whiteColor: #ffffff;

}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu a.mega-menu-link:hover::before {
background-color: var(--varMenuHoverColor);

}

var cssVarGet = getComputedStyle(document.documentElement)
.getPropertyValue('--varMenuHoverColor');

var greenColor = getComputedStyle(document.documentElement)
.getPropertyValue('--greenColor');

var whiteColor = getComputedStyle(document.documentElement)
.getPropertyValue('--whiteColor');

var cssVarSet = function(name, val) {
document.documentElement.style.setProperty(name, val);
};

cssVarSet('--varMenuHoverColor', whiteColor);

【讨论】：