将 :hover::before CSS 属性更改为 JavaScript var

Question

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

基本上我有一个 header，其中包含多个 mega-menu 项目，其中包含一个 li.class (sub-menu)，每个项目都包含一个 a.class 元素。在 hover::before 之后，我试图根据滚动位置更新属性变量。但是出现以下错误：

(index):1591 Uncaught TypeError: Cannot read property 'setProperty' of undefined

at (index):1591

at NodeList.forEach ()

at (index):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')
});

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

Answer 1

使用这个 link 我能够解决问题并使其按预期工作。

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);

将 :hover::before CSS 属性更改为 JavaScript var

Change :hover::before CSS property with JavaScript var

javascript

css

var

hover

css-selectors

将 :hover::before CSS 属性 更改为 JavaScript var

Change :hover::before CSS property with JavaScript var

javascript

css

var

hover

css-selectors

将 :hover::before CSS 属性更改为 JavaScript var