javascript - 根据其他 div 的悬停触发完全独立的 div

Question

是否可以触发与悬停的 div 完全无关的元素的 CSS 更改？

我在下拉菜单上有一个 CSS 悬停效果，我还想触发页面底部 div 的不透明度以创建背景叠加效果。

这是我正在使用的 CSS:

#overlay {
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:120px;
    left:0;
    z-index:0;
    height:120%;
    width:100%;
    visibility:hidden;
    opacity:0;
}
#menu-main-menu li.menu-parent-item:hover ul.sub-menu,
#menu-main-menu li.menu-parent-item:hover #overlay {
    visibility:visible;
    opacity:1;
}

子菜单的悬停效果很好，但 div #overlay 就在页面底部，悬停时不会被调用。

我已经尝试了各种替代方法，例如 :hover > #overlay、:hover + #overlay，但似乎没有什么可以触发它。我似乎也找不到这个问题的明确答案。

这可能吗？

Answer 1

是的。您可以在 php 文件中加载此样式，然后在您的 div 悬停时使用 jQuery 应用 css。