[已解决].nav:hover .z-index1

她与晚风

.nav:hover .z-index1{
    display: none;

}


.z-index1是只有当它是.nav的子元素才会生效吗?不是子元素的话为什么没反应

最佳答案

月排行榜 / 总排行榜

不二猫猫

2023-3-25 18:01:43

可以稍微的优化一下，这样写

1. // 获取第一个具有 image 类的元素
   
2. const [selectedImage] = document.querySelectorAll('.image');
   
3. 
   
4. // 添加事件委托到父元素上
   
5. const parent = document.querySelector('.parent');
   
6. parent.addEventListener('click', event => {
   
7.   // 获取被点击的子元素，如果不是图片则返回 null
   
8.   const image = event.target.closest('.image');
   
9.   if (image) {
   
10.     // 取消之前选中的图片的选中状态
    
11.     const prevSelectedImage = document.querySelector('.selected');
    
12.     if (prevSelectedImage) {
    
13.       prevSelectedImage.classList.remove('selected');
    
14.     }
    
15. 
    
16.     // 标记当前选中的图片，并修改其它图片的 z-index 值
    
17.     image.classList.add('selected');
    
18. 
    
19.     // 获取当前图片的兄弟元素，并修改它们的 z-index 值
    
20.     const siblings = Array.from(image.parentElement.children).filter(el => el !== image && el.classList.contains('image'));
    
21.     siblings.forEach(sibling => {
    
22.       sibling.style.zIndex = '0';
    
23.     });
    
24. 
    
25.     // 选择前面和后面的兄弟元素，并修改它们的 z-index 值
    
26.     let previousImage = image.previousElementSibling;
    
27.     while (previousImage && !previousImage.classList.contains('image')) {
    
28.       previousImage = previousImage.previousElementSibling;
    
29.     }
    
30.     if (previousImage) {
    
31.       previousImage.style.zIndex = '1';
    
32.     }
    
33.     let nextImage = image.nextElementSibling;
    
34.     while (nextImage && !nextImage.classList.contains('image')) {
    
35.       nextImage = nextImage.nextElementSibling;
    
36.     }
    
37.     if (nextImage) {
    
38.       nextImage.style.zIndex = '1';
    
39.     }
    
40.   }
    
41. });

复制代码

跳转到最佳答案楼层

isdkz

是的，这个 CSS 规则只对位于 .nav 元素内的 .z-index1 子元素生效。当你在 .nav 元素上悬停时，对应的 .z-index1 子元素的 display 属性会被设置为 none，使其隐藏。

这个选择器的结构如下：

.nav:hover：表示当悬停在具有 .nav 类名的元素上时。
空格：表示后面的类名应该是前面类名元素的子元素（可以是直接子元素，也可以是间接子元素）。
.z-index1：表示具有 .z-index1 类名的元素。
所以，如果 .z-index1 元素不是 .nav 元素的子元素，这个 CSS 规则不会生效。要让规则适用于任何位置的 .z-index1 元素，可以修改选择器，去掉 .nav:hover 部分，如下所示：

1. .z-index1:hover {
   
2.     display: none;
   
3. }

复制代码

这样，无论 .z-index1 元素是否位于 .nav 元素内，只要你悬停在它上面，它就会隐藏。

她与晚风

isdkz 发表于 2023-3-24 14:13
是的，这个 CSS 规则只对位于 .nav 元素内的 .z-index1 子元素生效。当你在 .nav 元素上悬停时，对应的 .z- ...

可是如果我想让 .nav:hover触发的时候,选取的另一个z-index1执行应该怎么写呢(不是父子关系 js还没学)

她与晚风

isdkz 发表于 2023-3-24 14:13
是的，这个 CSS 规则只对位于 .nav 元素内的 .z-index1 子元素生效。当你在 .nav 元素上悬停时，对应的 .z- ...

我想实现切换图片的功能,如果点击一个图标的话,可以改变其它图片的z-index的值

不二猫猫

是的，.z-index1 是只有在 .nav 元素内部的子元素才会被选择并生效。如果 .z-index1 不是子元素，那么它不会被 .nav:hover 所选择。

如果您想要在 .nav:hover 触发时选取另一个 .z-index1 元素，可以使用相邻兄弟选择器 + 或者通用兄弟选择器 ~。下面是两个例子：

使用相邻兄弟选择器 + ：

.nav:hover + .z-index1 {
    /* 在 .nav 元素后的第一个 .z-index1 元素被选取 */
}
使用通用兄弟选择器 ~ ：

.nav:hover ~ .z-index1 {
    /* 所有在 .nav 元素后的 .z-index1 元素都被选取 */
}
如果您想要实现切换图片的功能，可以使用 JavaScript。可以给每个图标添加一个事件监听器，当图标被点击时，修改其它图片的 z-index 值。

下面是一个简单的例子：

1. // 获取所有图片元素和当前选中的图片元素
   
2. const images = document.querySelectorAll('.image');
   
3. let selectedImage = null;
   
4. 
   
5. // 添加事件监听器
   
6. images.forEach(image => {
   
7.   image.addEventListener('click', () => {
   
8.     // 取消之前选中的图片的选中状态
   
9.     if (selectedImage) {
   
10.       selectedImage.classList.remove('selected');
    
11.     }
    
12.     // 标记当前选中的图片，并修改其它图片的 z-index 值
    
13.     selectedImage = image;
    
14.     selectedImage.classList.add('selected');
    
15.     images.forEach(otherImage => {
    
16.       if (otherImage !== selectedImage) {
    
17.         otherImage.style.zIndex = '0';
    
18.       }
    
19.     });
    
20.   });
    
21. });
    
22. 这个例子假设每个图片元素都有 image 类名，并且已经使用 CSS 样式设置它们的 z-index 值。当一个图片被点击时，它被标记为选中状态，并将其它图片的 z-index 值设置为 0。

复制代码

她与晚风

不二猫猫 发表于 2023-3-25 16:21
是的，.z-index1 是只有在 .nav 元素内部的子元素才会被选择并生效。如果 .z-index1 不是子元素，那么它不 ...

还是有点问题,没有生效

                               
登录/注册后可看大图

她与晚风

这个是代码

她与晚风

不二猫猫 发表于 2023-3-25 16:21
是的，.z-index1 是只有在 .nav 元素内部的子元素才会被选择并生效。如果 .z-index1 不是子元素，那么它不 ...

右下角希望实现点击图标可以短暂切换图片

她与晚风

她与晚风 发表于 2023-3-25 17:21
右下角希望实现点击图标可以短暂切换图片

1

她与晚风

不二猫猫 发表于 2023-3-25 16:21
是的，.z-index1 是只有在 .nav 元素内部的子元素才会被选择并生效。如果 .z-index1 不是子元素，那么它不 ...

懂了哥!!!!
这个通用兄弟选择器只能选取后面的子元素,我移动了一些代码位置就好了...
那有没有可以选择前面的兄弟元素的方法呢

不二猫猫

她与晚风 发表于 2023-3-25 17:32
懂了哥!!!!
这个通用兄弟选择器只能选取后面的子元素,我移动了一些代码位置就好了...
那有没有可以选择 ...

1. const images = document.querySelectorAll('.image');
   
2. let selectedImage = null;
   
3. 
   
4. // 添加事件监听器
   
5. images.forEach(image => {
   
6.   image.addEventListener('click', () => {
   
7.     // 取消之前选中的图片的选中状态
   
8.     if (selectedImage) {
   
9.       selectedImage.classList.remove('selected');
   
10.     }
    
11.     // 标记当前选中的图片，并修改其它图片的 z-index 值
    
12.     selectedImage = image;
    
13.     selectedImage.classList.add('selected');
    
14.     images.forEach(otherImage => {
    
15.       if (otherImage !== selectedImage) {
    
16.         otherImage.style.zIndex = '0';
    
17.       } else {
    
18.         // 选择前面的兄弟元素
    
19.         let previousImage = selectedImage.previousElementSibling;
    
20.         while (previousImage && !previousImage.classList.contains('image')) {
    
21.           previousImage = previousImage.previousElementSibling;
    
22.         }
    
23.         if (previousImage) {
    
24.           previousImage.style.zIndex = '1';
    
25.         }
    
26.       }
    
27.     });
    
28.   });
    
29. });

复制代码

不二猫猫

选择前面和后面的兄弟元素

1. const images = document.querySelectorAll('.image');
   
2. let selectedImage = null;
   
3. 
   
4. // 添加事件监听器
   
5. images.forEach(image => {
   
6.   image.addEventListener('click', () => {
   
7.     // 取消之前选中的图片的选中状态
   
8.     if (selectedImage) {
   
9.       selectedImage.classList.remove('selected');
   
10.     }
    
11.     // 标记当前选中的图片，并修改其它图片的 z-index 值
    
12.     selectedImage = image;
    
13.     selectedImage.classList.add('selected');
    
14.     images.forEach(otherImage => {
    
15.       if (otherImage !== selectedImage) {
    
16.         otherImage.style.zIndex = '0';
    
17.       } else {
    
18.         // 选择前面和后面的兄弟元素
    
19.         let previousImage = selectedImage.previousElementSibling;
    
20.         while (previousImage && !previousImage.classList.contains('image')) {
    
21.           previousImage = previousImage.previousElementSibling;
    
22.         }
    
23.         if (previousImage) {
    
24.           previousImage.style.zIndex = '1';
    
25.         }
    
26.         let nextImage = selectedImage.nextElementSibling;
    
27.         while (nextImage && !nextImage.classList.contains('image')) {
    
28.           nextImage = nextImage.nextElementSibling;
    
29.         }
    
30.         if (nextImage) {
    
31.           nextImage.style.zIndex = '1';
    
32.         }
    
33.       }
    
34.     });
    
35.   });
    
36. });

复制代码

不二猫猫

可以稍微的优化一下，这样写

1. // 获取第一个具有 image 类的元素
   
2. const [selectedImage] = document.querySelectorAll('.image');
   
3. 
   
4. // 添加事件委托到父元素上
   
5. const parent = document.querySelector('.parent');
   
6. parent.addEventListener('click', event => {
   
7.   // 获取被点击的子元素，如果不是图片则返回 null
   
8.   const image = event.target.closest('.image');
   
9.   if (image) {
   
10.     // 取消之前选中的图片的选中状态
    
11.     const prevSelectedImage = document.querySelector('.selected');
    
12.     if (prevSelectedImage) {
    
13.       prevSelectedImage.classList.remove('selected');
    
14.     }
    
15. 
    
16.     // 标记当前选中的图片，并修改其它图片的 z-index 值
    
17.     image.classList.add('selected');
    
18. 
    
19.     // 获取当前图片的兄弟元素，并修改它们的 z-index 值
    
20.     const siblings = Array.from(image.parentElement.children).filter(el => el !== image && el.classList.contains('image'));
    
21.     siblings.forEach(sibling => {
    
22.       sibling.style.zIndex = '0';
    
23.     });
    
24. 
    
25.     // 选择前面和后面的兄弟元素，并修改它们的 z-index 值
    
26.     let previousImage = image.previousElementSibling;
    
27.     while (previousImage && !previousImage.classList.contains('image')) {
    
28.       previousImage = previousImage.previousElementSibling;
    
29.     }
    
30.     if (previousImage) {
    
31.       previousImage.style.zIndex = '1';
    
32.     }
    
33.     let nextImage = image.nextElementSibling;
    
34.     while (nextImage && !nextImage.classList.contains('image')) {
    
35.       nextImage = nextImage.nextElementSibling;
    
36.     }
    
37.     if (nextImage) {
    
38.       nextImage.style.zIndex = '1';
    
39.     }
    
40.   }
    
41. });

复制代码

她与晚风

不二猫猫 发表于 2023-3-25 17:58
选择前面和后面的兄弟元素

ok,还没学到js