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动画，您可以在下面的代码片段中看到它。关键属性是：

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

这是一个好主意，但遇到一个或两个问题：

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

MDN counter() docs请注意：

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

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

用反增量改变z-index

2 个答案:

段