html - 悬停一个元素以更改另一个元素的属性

Question

所以我一直在尝试做这个小网站，当我将鼠标悬停在导航栏上时，我可以在其中突出显示我的 div。我这样做是为了让我的 div 在我悬停整个导航栏时达到 0.3 不透明度，但我希望它只在我悬停导航栏的 3 个内容中的 1 个时达到 0.3 不透明度。

我已将代码放入 https://jsfiddle.net/qjk0cpse/1/以便您能够检查我的代码。提前致谢!

HTML:

<div class="navbar">
    <div class="navbar-list">Spela!</div>
    <div class="navbar-list">Bakgrundsinformation</div>
    <div class="navbar-list">Information</div>
</div>

CSS:

.navbar:hover ~.game{
    opacity:0.3;
}

Answer 1

不幸的是，这对于 CSS 是不可能的，因为没有父级选择器，而且您要采用的“路径”向上(到父级)一次。您的 CSS 代码是您在不使用 JavaScript 的情况下可以获得的最接近的代码。

JavaScript 解决方案需要将事件监听器附加到元素并更改 .game 元素的样式。

const items = document.querySelectorAll('.navbar-list')

Array.prototype.forEach.call(items, item => {
  item.addEventListener('mouseenter', () => {
      document.querySelector('.game').style.opacity = '.3'
    })
  item.addEventListener('mouseleave', () => {
      document.querySelector('.game').style.opacity = '1'
    })
})

这是 fiddle :https://jsfiddle.net/obpq7rte/