使用反增量更改 z-index

Question

我尝试制作一个图像滑块，当鼠标悬停在一个点上时会显示一张图片。我也尝试使用z-index 在图像之间切换，但没有任何移动。

.slider {
  counter-reset: index 1000;
}

.slider input[name='slide_switch']:hover+label+img {
  counter-increment: index;
  z-index: counter(index);
}

Answer 1

即使您使用 JavaScript/jQuery，您尝试使用 counter 的方式也无法正常工作。 counter 属性用于对元素进行编号，例如与z-index 无关的有序列表。您能做的最好的事情就是依赖 CSS 动画，您可以在下面的 sn-p 中看到它。关键属性是：

• transition: all 3s 需要很长时间才能观看z-index 动画。
• color: rgba(R, G, B, A) A 是一个不透明度值，可以从完全可见变为不可见，以及两者之间的透明度级别。
• position: absolute/relative 不仅对于 z-index 是必需的，而且对于元素的垂直和水平尺寸也很有帮助。
• calc() 一个函数，它将为 CSS 属性应用一个简单的方程。它的最佳功能之一是可以使用绝对（例如 px、pt 等）和/或相对（例如 em、% 等）值的组合。

当鼠标悬停在一个圆圈上时，将光标停留在那里 3 秒。为z-index 制作动画是一个缓慢的过程，因为在更快的速度下，渐进式褪色不会很明显。

片段

html {
  font: 400 12px/1.2 'Consolas';
}

.slider {
  position: relative;
  width: 250px;
  height: 250px;
}

output {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 3s;
  display: block;
}

output b {
  position: absolute;
  font-size: 5rem;
  top: calc(125px - 2.5rem);
  text-align: center;
  display: block;
  width: 100%;
}

label {
  z-index: 100;
  position: relative;
  height: 25px;
  width: 25px;
  padding: 5px;
  cursor: pointer;
  display: inline-block;
}

label b {
  z-index: 100;
  position: relative;
  height: 15px;
  width: 15px;
  border: 1px solid #fff;
  border-radius: 12px;
  cursor: pointer;
  margin: 5px;
  display: inline-block;
  padding: 1px 1px 0;
  text-align: center;
  color: #fff;
}

#A {
  z-index: 10;
  background: rgba(190, 0, 0, .5);
}

#B {
  z-index: 20;
  background: rgba(0, 0, 190, .5);
}

#C {
  z-index: 30;
  background: rgba(255, 50, 0, .5);
}

#D {
  z-index: 40;
  background: rgba(50, 200, 50, .5);
}

#E {
  z-index: 50;
  background: rgba(210, 100, 55, .5);
}

#F {
  z-index: 60;
  background: rbga(255, 200, 0, .5);
}

#a:hover~#A {
  z-index: 70;
  transition: all 3s;
  background: rgba(190, 0, 0, 1);
}

#b:hover~#B {
  z-index: 70;
  transition: all 3s;
  background: rgba(0, 0, 190, 1);
}

#c:hover~#C {
  z-index: 70;
  transition: all 3s;
  background: rgba(255, 50, 0, 1);
}

#d:hover~#D {
  z-index: 70;
  transition: all 3s;
  background: rgba(50, 200, 50, 1);
}

#e:hover~#E {
  z-index: 70;
  transition: all 3s;
  background: rgba(210, 100, 55, 1);
}

#f:hover~#F {
  z-index: 70;
  transition: all 3s;
  background: rgba(255, 200, 0, 1);
}

label:hover {
  background: rgba(255, 255, 255, .1);
  color: #000;
}

.top {
  z-index: 75;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  width: 250px;
  height: 205px;
  transition: all 3s
}

label:hover~.top {
  z-index: 0;
  background: rgba(255, 255, 255, .1);
  transition: all 3s
}

hr {
  position: relative;
  z-index: 101;
}

<fieldset class='slider'>
  <label id="a" for="A"><b>A</b></label>
  <label id="b" for="B"><b>B</b></label>
  <label id="c" for="C"><b>C</b></label>
  <label id="d" for="D"><b>D</b></label>
  <label id="e" for="E"><b>E</b></label>
  <label id="f" for="F"><b>F</b></label>
  <hr/>
  <output id="A"><b>A</b></output>
  <output id="B"><b>B</b></output>
  <output id="C"><b>C</b></output>
  <output id="D"><b>D</b></output>
  <output id="E"><b>E</b></output>
  <output id="F"><b>F</b></output>
  <div class='top'>&nbsp;</div>
</fieldset>

Answer 2

这是一个巧妙的想法，但会遇到一两个问题：

1. CSS counter() 函数返回 <string>，但 z-index 属性正在寻找 <integer>。
2. 浏览器并不真正支持它。

MDN counter() docs 请注意：

counter() 函数可用于任何 CSS 属性，但对 content 以外的属性的支持是实验性的，对 type-or-unit 参数的支持很少。

“类型或单位参数”的含义并不完全清楚，因为该页面上没有讨论任何内容。 attr() 函数确实允许通过 <type-or-unit> 参数返回替代类型（例如整数）。我想知道是否有人想在某个时候向counter() 添加相同的参数；如果是这样，这似乎早就被放弃了。