p:not(:hover) 仅在悬停另一个对象时激活答案

【问题标题】：p:not(:hover) only active when another object is hoveredp:not(:hover) 仅在悬停另一个对象时激活
【发布时间】：2023-01-09 01:28:24
【问题描述】：

在：

p:not(:hover) {
    opacity: 0.6;
}

p {
    opacity: 1;
}

这只会突出显示悬停的内容，但我想实现一种效果，可以降低未悬停的对象的不透明度。我该怎么做？

作为编程新手，我唯一可以联系的“人”是 chatGPT，但经过多次尝试后我还是失败了，或者可能是我无法正确拼写我的要求。

【问题讨论】：

标签： html css hover

【解决方案1】：

您不必使用 JavaScript。要为除当前项目之外的所有项目制作效果opacity: 0.6，您需要将悬停分配给父项目，同时将带有悬停的父项目的效果opacity: 1分配给当前项目：div:hover p:hover {}

p {
    background: green;
}

div:hover p {
    opacity: 0.6;
}

div:hover p:hover {
    opacity: 1;
}

<div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>

【讨论】：

【解决方案2】：

您使代码过于复杂。你想做的比看起来简单得多。据我了解，您只想将 opacity: 1 设置为带有悬停的段落，其余设置为 opacity: .6

CSS

p {
    opacity: .6;
}

p:hover {
    opacity: 1;
}

使用此代码，默认情况下所有段落的不透明度均为 0.6，当您将鼠标悬停在它们上方时，该特定段落的不透明度将为 1。

【讨论】：

【解决方案3】：

将有一种使用 JavaScript 的简单方法。

const boxItems = Array.from(document.querySelectorAll(".box"))

const setBoxOpacity = () => boxItems.forEach(item => item.classList.add("not-hovered"))
const removeBoxOpacity = () => boxItems.forEach(item => item.classList.remove("not-hovered"))

boxItems.forEach(box => {
    box.addEventListener("mouseover", (e) => {
      setBoxOpacity()
      e.target.classList.remove("not-hovered")
  })
})

boxItems.forEach(box => box.addEventListener("mouseout", removeBoxOpacity))

.boxes {
  display: flex;
  gap: 15px;
}
.box {
  border: 1px solid black;
  width: 200px;
  height: 150px;
  background: red;
  opacity: 1;
}

.box.not-hovered {
  opacity: 0.5;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：

没有解释的代码是没有用的。