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

艾莉·贾穆斯（Elie Jamous）

因此，我一直在尝试创建这个小网站，当我将导航栏悬停时可以突出显示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;
}

拉扎尔（LazarLjubenović）

不幸的是，由于没有父选择器，因此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'
    })
})

这是小提琴：https : //jsfiddle.net/obpq7rte/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。