文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在子元素上盘旋时选择所有子元素

问如何在子元素上盘旋时选择所有子元素
EN

Stack Overflow用户
提问于 2021-03-29 10:57:46
回答 2查看 90关注 0票数 0

我想复制这个效果当你悬停在一个文本，所有其他文本将获得不透明度0。

以下是网站：https://www.jeandawson.com/

我试图用纯css来解决这个问题。然而，据我所知，当你悬停一个特定的孩子并影响他们时，你不能选择所有的孩子。

我试用了一个~选择器，这部分是因为它为即将到来的孩子设置了不透明度，但是前面的选择器没有受到影响。

我用javascript尝试了这段代码，但是当我将它悬停时，selectedBox中的值不会被保存，不透明度也不会改变。我仍然在学习javascript，我相信通过事件侦听器，代码不会改变吗？

​

代码语言：javascript
复制
var boxes = document.querySelectorAll("[class^=box-]")
let selectedBox  = null

const newList = [...boxes]

boxes.forEach( (e) => {

    e.addEventListener("mouseover", () =>{
      selectedBox = e
      
    })

    e.addEventListener("mouseleave", ()=>{
        selectedBox = null
    })

})

console.log(selectedBox)


boxes.forEach( (e) => {

   if (selectedBox == null){
     e.style.opacity = 1
   }
   else{
     e.style.opacity = 0
   }
})
代码语言：javascript
复制
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  font-size: 3rem;
  font-family: serif;
}



[class^="box-"] {
  background-color: skyblue;
}

.container:hover [class^="box-"]:not(:hover) {
  opacity: 0;
}

.box-1 {
  grid-area: A;
  align-self: flex-start;
}

.box-2 {
  grid-area: B;
  align-self: flex-start;
}

.box-3 {
  grid-area: C;
  align-self: flex-start;
}

.box-4 {
  grid-area: D;
  align-self: flex-end;
}

.box-5 {
  grid-area: E;
  align-self: flex-start;
}

.box-6 {
  grid-area: F;
  align-self: center;
}

.box-7 {
  
  grid-area: G;
 
  align-self: center;
}

.container4 {
  margin-top: 3em;
  display: -ms-grid;
  display: grid;
  gap: 20px;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  grid-template-areas: "A A A B    B B D D   D C C C" "A A A B    B B D D   D C C C" "E E E F    F F . .   . G G G" "E E E F    F F . .   . G G G";
}

@media (max-width: 996px) {
  .container4 {
    grid-template-areas: "A A" "B B" "C D" "C D" "E E" "F F";
  }
}

@media (max-width: 556px) {
  .container4 {
    grid-template-areas: "A" "B" "D" "D" "D" "C" "E" "F";
  }
}

.changing {
  z-index: 20;
  background-color: red;
}


/*# sourceMappingURL=style.css.map */
代码语言：javascript
复制
<div class="container4">
  <div class="box-1">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-2">
    <p>Starface*</p>
    <p>00:01:34</p>
  </div>
  <div class="box-3">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-4">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-5">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-6">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-7">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
</div>

​

javascript
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-29 11:22:49

​

它怎麽工作?

​

  1. 首先，我们做一个循环，它的电流作为i。在它的帮助下，我们向每个box(boxes[i])添加了2个事件，如下所示：

for (设i= 0；i< boxes.length；i++) { boxesi.addEventListener("mouseover"，() => { })；boxesi.addEventListener("mouseleave"，() => { })；}

​

  1. 现在，我们添加另一个循环，它在j事件中具有当前的mouseover。我们添加了另一个循环，因为我们不想选择已经悬停的元素，所以我们在if- one语句中使用了i !== j：(这里已经选中的是i，j也有相同的元素i，这就是为什么我们用这个i !== j__排除它的原因)，然后我们简单地将0的opacity添加到所有没有悬停的元素中，而悬浮的元素具有opacity of 1。

for (设i= 0；i< boxes.length；i++) { boxesi.addEventListener("mouseover"，() => { for (j= 0；j< boxes.length；j++) { if (i !== j) boxesj.style.opacity = 0；=> boxesj.style.opacity = 1；}})。。。}

​

  1. 最后，我们将opacity of 1添加到all中，因为悬停的部分是离开的。

。。。boxesi.addEventListener("mouseleave"，() => { for (设j= 0；j< boxes.length；j++) { boxesj.style.opacity = 1；})；}

​

代码语言：javascript
复制
const boxes = document.querySelectorAll("[class^=box-]");

for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("mouseover", () => {
    for (let j = 0; j < boxes.length; j++) {
      if (i !== j) boxes[j].style.opacity = 0;
      else boxes[j].style.opacity = 1;
    }
  });

  boxes[i].addEventListener("mouseleave", () => {
    for (let j = 0; j < boxes.length; j++) {
      boxes[j].style.opacity = 1;
    }
  });
}
代码语言：javascript
复制
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  font-size: 3rem;
  font-family: serif;
}

[class^="box-"] {
  background-color: skyblue;
  transition-duration: 0.2s;
}

[class^="box-"]:hover {
  background-color: blueviolet;
  color: #ffffff;
  cursor: pointer;
}

.container:hover [class^="box-"]:not(:hover) {
  opacity: 0;
}

.box-1 {
  grid-area: A;
  align-self: flex-start;
}

.box-2 {
  grid-area: B;
  align-self: flex-start;
}

.box-3 {
  grid-area: C;
  align-self: flex-start;
}

.box-4 {
  grid-area: D;
  align-self: flex-end;
}

.box-5 {
  grid-area: E;
  align-self: flex-start;
}

.box-6 {
  grid-area: F;
  align-self: center;
}

.box-7 {
  grid-area: G;
  align-self: center;
}

.container4 {
  margin-top: 3em;
  display: -ms-grid;
  display: grid;
  gap: 20px;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  grid-template-areas: "A A A B    B B D D   D C C C" "A A A B    B B D D   D C C C" "E E E F    F F . .   . G G G" "E E E F    F F . .   . G G G";
}

@media (max-width: 996px) {
  .container4 {
    grid-template-areas: "A A" "B B" "C D" "C D" "E E" "F F";
  }
}

@media (max-width: 556px) {
  .container4 {
    grid-template-areas: "A" "B" "D" "D" "D" "C" "E" "F";
  }
}

.changing {
  z-index: 20;
  background-color: red;
}
代码语言：javascript
复制
<div class="container4">
  <div class="box-1">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-2">
    <p>Starface*</p>
    <p>00:01:34</p>
  </div>
  <div class="box-3">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-4">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-5">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-6">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
  <div class="box-7">
    <p>Devilish</p>
    <p>00:01:34</p>
  </div>
</div>

​

​

​

去看看Codepen

​

票数 0
EN

Stack Overflow用户

发布于 2021-03-29 11:34:02

用forEach()方法求解。

​

代码语言：javascript
复制
var boxes = document.querySelectorAll("[class^=box-]");

boxes.forEach(function(box) {
    box.addEventListener("mouseover", function() {
        boxes.forEach(function(box_hide) {box_hide.style.opacity = '0'});       
        this.style.opacity = '';
    })    
    box.addEventListener("mouseout", function() {
        boxes.forEach(function(box_show) {box_show.style.opacity = ''});
    })
});
代码语言：javascript
复制
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    height: 100vh;
    font-size: 3rem;
    font-family: serif;
}

[class^="box-"] {
    background-color: skyblue;
    transition: .5s;
    cursor: pointer;
}

/*.container:hover [class^="box-"]:not(:hover) {
  opacity: 0;
}*/

.box-1 {
    grid-area: A;
    align-self: flex-start;
}

.box-2 {
    grid-area: B;
    align-self: flex-start;
}

.box-3 {
    grid-area: C;
    align-self: flex-start;
}

.box-4 {
    grid-area: D;
    align-self: flex-end;
}

.box-5 {
    grid-area: E;
    align-self: flex-start;
}

.box-6 {
    grid-area: F;
    align-self: center;
}

.box-7 {
    grid-area: G;

    align-self: center;
}

.container4 {
    margin-top: 3em;
    display: -ms-grid;
    display: grid;
    gap: 20px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    grid-template-areas: "A A A B    B B D D   D C C C" "A A A B    B B D D   D C C C" "E E E F    F F . .   . G G G" "E E E F    F F . .   . G G G";
}

@media (max-width: 996px) {
    .container4 {
        grid-template-areas: "A A" "B B" "C D" "C D" "E E" "F F";
    }
}

@media (max-width: 556px) {
    .container4 {
        grid-template-areas: "A" "B" "D" "D" "D" "C" "E" "F";
    }
}

.changing {
    z-index: 20;
    background-color: red;
}

/*# sourceMappingURL=style.css.map */
代码语言：javascript
复制
<div class="container4">
    <div class="box-1">
        <p>Devilish</p>
        <p>00:01:34</p>
    </div>
    <div class="box-2">
        <p>Starface*</p>
        <p>00:01:34</p>
    </div>
    <div class="box-3">
        <p>Devilish</p>
        <p>00:01:34</p>
    </div>
    <div class="box-4">
        <p>Devilish</p>
        <p>00:01:34</p>
    </div>
    <div class="box-5">
        <p>Devilish</p>
        <p>00:01:34</p>
    </div>
    <div class="box-6">
        <p>Devilish</p>
        <p>00:01:34</p>
    </div>
    <div class="box-7">
        <p>Devilish</p>
        <p>00:01:34</p>
    </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66852977

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档