.nav:hover .z-index1,Web开发,技术交流,鱼C论坛

她与晚风 发表于 2023-3-24 13:35:46

.nav:hover .z-index1

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

}

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

isdkz 发表于 2023-3-24 14:13:13

是的，这个 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 元素内，只要你悬停在它上面，它就会隐藏。

她与晚风 发表于 2023-3-24 22:03:25

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

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

她与晚风 发表于 2023-3-24 22:05:04

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

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

不二猫猫 发表于 2023-3-25 16:21:50

是的，.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 17:16:24

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

还是有点问题,没有生效"C:\Users\lenovo\Desktop\屏幕截图 2023-03-25 171503.png"

她与晚风 发表于 2023-3-25 17:17:22

这个是代码

她与晚风 发表于 2023-3-25 17:21:26

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

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

她与晚风 发表于 2023-3-25 17:23:57

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

1

她与晚风 发表于 2023-3-25 17:32:27

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

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

不二猫猫 发表于 2023-3-25 17:56:33

她与晚风发表于 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';
   }
   }
});
});
});

不二猫猫 发表于 2023-3-25 17:58:10

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

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';
   }
   }
});
});
});

不二猫猫 发表于 2023-3-25 18:01:43

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

// 获取第一个具有 image 类的元素
const = 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 18:12:38

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

ok,还没学到js{:9_222:}

页: [1]

鱼C论坛's Archiver

.nav:hover .z-index1