英文:
p:not(:hover) only active when another object is hovered
问题
在上面的代码中，您想要实现的效果是降低没有被悬停的对象的不透明度。您可以尝试以下方法来实现这个效果：
/* 初始状态下，所有 <p> 元素的不透明度为 0.6 */
p {
opacity: 0.6;
}
/* 当鼠标悬停在 <p> 元素上时，将其不透明度恢复为 1 */
p:hover {
opacity: 1;
}
这将使所有的 <p> 元素在初始状态下都具有较低的不透明度，当鼠标悬停在它们上面时，它们的不透明度会恢复为 1，实现了您所需的效果。
至于您提到的与编程相关的问题，如果您需要进一步的帮助，可以随时提出具体的问题，我会尽力提供解答。
英文:
in:
p:not(:hover) {
opacity: 0.6;
}
p {
opacity: 1;
}
Which would only highlight what is hovered, but I want to achieve an effect that would lower opacity of objects that aren't being hovered on. how do I do it?
the only "person" I could reach out to as someone new to programming was chatGPT that has failed me after many tries, or maybe it's me who can't spell my requirements correctly.
答案1
得分: 0
你正在过于复杂化代码。你想要做的比看起来要简单得多。从我的理解来看，你想要设置opacity: 1只在鼠标悬停在段落上时才会生效，其余情况下设置为opacity: .6。
CSS
p {
opacity: .6;
}
p:hover {
opacity: 1;
}
使用这段代码，默认情况下所有段落的不透明度都是0.6，当你将鼠标悬停在它们上面时，特定的段落将不透明度设置为1。
英文:
You're overcomplicating the code. What you want to do is much simpler than it seems. From what I understand you want to set opacity: 1 only to the paragraph with the hover, and the rest set with opacity: .6
CSS
p {
opacity: .6;
}
p:hover {
opacity: 1;
}
With this code, by default all paragraphs will have an opacity of 0.6, and when you hover over them, that particular paragraph will have an opacity of 1.
答案2
得分: 0
你不必使用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>文本</p>
<p>文本</p>
<p>文本</p>
</div>
英文:
You don't have to use JavaScript. To make the effect opacity: 0.6 for all items except the current item, you need to assign a hover to the parent item, and simultaneously assign the effect opacity: 1 from the parent with the hover to the current item: div:hover p:hover {}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
p {
background: green;
}
div:hover p {
opacity: 0.6;
}
div:hover p:hover {
opacity: 1;
}
<!-- language: lang-html -->
<div>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<!-- end snippet -->
答案3
得分: -2
以下是翻译好的内容：
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>
英文:
There would be one simple way of doing it with JavaScript.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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))
<!-- language: lang-css -->
.boxes {
display: flex;
gap: 15px;
}
.box {
border: 1px solid black;
width: 200px;
height: 150px;
background: red;
opacity: 1;
}
.box.not-hovered {
opacity: 0.5;
}
<!-- language: lang-html -->
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论