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

她与晚风

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

}


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

最佳答案

月排行榜 / 总排行榜

不二猫猫

2023-3-25 18:01:43

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

// 获取第一个具有 image 类的元素
const [selectedImage] = document.querySelectorAll('.image');

// 添加事件委托到父元素上
const parent = document.querySelector('.parent');
parent.addEventListener('click', event => {
  // 获取被点击的子元素，如果不是图片则返回 null
  const image = event.target.closest('.image');
  if (image) {
    // 取消之前选中的图片的选中状态
    const prevSelectedImage = document.querySelector('.selected');
    if (prevSelectedImage) {
      prevSelectedImage.classList.remove('selected');
    }

    // 标记当前选中的图片，并修改其它图片的 z-index 值
    image.classList.add('selected');

    // 获取当前图片的兄弟元素，并修改它们的 z-index 值
    const siblings = Array.from(image.parentElement.children).filter(el => el !== image && el.classList.contains('image'));
    siblings.forEach(sibling => {
      sibling.style.zIndex = '0';
    });

    // 选择前面和后面的兄弟元素，并修改它们的 z-index 值
    let previousImage = image.previousElementSibling;
    while (previousImage && !previousImage.classList.contains('image')) {
      previousImage = previousImage.previousElementSibling;
    }
    if (previousImage) {
      previousImage.style.zIndex = '1';
    }
    let nextImage = image.nextElementSibling;
    while (nextImage && !nextImage.classList.contains('image')) {
      nextImage = nextImage.nextElementSibling;
    }
    if (nextImage) {
      nextImage.style.zIndex = '1';
    }
  }
});

跳转到最佳答案楼层

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 部分，如下所示：

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

这样，无论 .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 值。

下面是一个简单的例子：

// 获取所有图片元素和当前选中的图片元素
const images = document.querySelectorAll('.image');
let selectedImage = null;

// 添加事件监听器
images.forEach(image => {
  image.addEventListener('click', () => {
    // 取消之前选中的图片的选中状态
    if (selectedImage) {
      selectedImage.classList.remove('selected');
    }
    // 标记当前选中的图片，并修改其它图片的 z-index 值
    selectedImage = image;
    selectedImage.classList.add('selected');
    images.forEach(otherImage => {
      if (otherImage !== selectedImage) {
        otherImage.style.zIndex = '0';
      }
    });
  });
});
这个例子假设每个图片元素都有 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
懂了哥!!!!
这个通用兄弟选择器只能选取后面的子元素,我移动了一些代码位置就好了...
那有没有可以选择 ...

const images = document.querySelectorAll('.image');
let selectedImage = null;

// 添加事件监听器
images.forEach(image => {
  image.addEventListener('click', () => {
    // 取消之前选中的图片的选中状态
    if (selectedImage) {
      selectedImage.classList.remove('selected');
    }
    // 标记当前选中的图片，并修改其它图片的 z-index 值
    selectedImage = image;
    selectedImage.classList.add('selected');
    images.forEach(otherImage => {
      if (otherImage !== selectedImage) {
        otherImage.style.zIndex = '0';
      } else {
        // 选择前面的兄弟元素
        let previousImage = selectedImage.previousElementSibling;
        while (previousImage && !previousImage.classList.contains('image')) {
          previousImage = previousImage.previousElementSibling;
        }
        if (previousImage) {
          previousImage.style.zIndex = '1';
        }
      }
    });
  });
});

不二猫猫

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

const images = document.querySelectorAll('.image');
let selectedImage = null;

// 添加事件监听器
images.forEach(image => {
  image.addEventListener('click', () => {
    // 取消之前选中的图片的选中状态
    if (selectedImage) {
      selectedImage.classList.remove('selected');
    }
    // 标记当前选中的图片，并修改其它图片的 z-index 值
    selectedImage = image;
    selectedImage.classList.add('selected');
    images.forEach(otherImage => {
      if (otherImage !== selectedImage) {
        otherImage.style.zIndex = '0';
      } else {
        // 选择前面和后面的兄弟元素
        let previousImage = selectedImage.previousElementSibling;
        while (previousImage && !previousImage.classList.contains('image')) {
          previousImage = previousImage.previousElementSibling;
        }
        if (previousImage) {
          previousImage.style.zIndex = '1';
        }
        let nextImage = selectedImage.nextElementSibling;
        while (nextImage && !nextImage.classList.contains('image')) {
          nextImage = nextImage.nextElementSibling;
        }
        if (nextImage) {
          nextImage.style.zIndex = '1';
        }
      }
    });
  });
});

不二猫猫

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

// 获取第一个具有 image 类的元素
const [selectedImage] = document.querySelectorAll('.image');

// 添加事件委托到父元素上
const parent = document.querySelector('.parent');
parent.addEventListener('click', event => {
  // 获取被点击的子元素，如果不是图片则返回 null
  const image = event.target.closest('.image');
  if (image) {
    // 取消之前选中的图片的选中状态
    const prevSelectedImage = document.querySelector('.selected');
    if (prevSelectedImage) {
      prevSelectedImage.classList.remove('selected');
    }

    // 标记当前选中的图片，并修改其它图片的 z-index 值
    image.classList.add('selected');

    // 获取当前图片的兄弟元素，并修改它们的 z-index 值
    const siblings = Array.from(image.parentElement.children).filter(el => el !== image && el.classList.contains('image'));
    siblings.forEach(sibling => {
      sibling.style.zIndex = '0';
    });

    // 选择前面和后面的兄弟元素，并修改它们的 z-index 值
    let previousImage = image.previousElementSibling;
    while (previousImage && !previousImage.classList.contains('image')) {
      previousImage = previousImage.previousElementSibling;
    }
    if (previousImage) {
      previousImage.style.zIndex = '1';
    }
    let nextImage = image.nextElementSibling;
    while (nextImage && !nextImage.classList.contains('image')) {
      nextImage = nextImage.nextElementSibling;
    }
    if (nextImage) {
      nextImage.style.zIndex = '1';
    }
  }
});

她与晚风

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

ok,还没学到js