使用计数器增量更改 z-index [英] Change z-index with counter-increment

问题描述

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

I try to make an image slider which will show a picture when a mouse hovers over a dot. I tried too switch between images by using z-index but nothing moved.

.slider {
  counter-reset: index 1000;
}

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

推荐答案

即使您使用 JavaScript/jQuery，您尝试使用 counter 的方式也行不通.counter 属性用于对元素进行编号，例如与 z-index 无关的有序列表.您能做的最好的事情就是依赖 CSS 动画，您可以在以下代码段中看到它.关键属性是:

The way you were trying to use counter wasn't going to work even if you used JavaScript/jQuery. The counter properties are used to number elements like an ordered list it has nothing to do with z-index. The best you can do is to rely on CSS animation which you can see in the following snippet. The key properties were:

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

• transition: all 3s a long duration is needed to view z-index animated.
• color: rgba(R, G, B, A) A is an opacity value that can change from totally visible to invisible, plus the levels of transparency between.
• position: absolute/relative is not only required for z-index but also helpful for vertical and horizontal dimensions for elements as well.
• calc() a function that will apply a simple equation for CSS properties. One of it's best features is that will work with a combination of absolute (e.g. px, pt, etc.) and/or relative (e.g. em, %, etc.) values.

将鼠标悬停在圆圈上时，将光标保持在那里 3 秒.动画 z-index 是一个缓慢的过程，因为在较快的速度下，渐进式淡入淡出不会很明显.

When hovering over a circle, keep the cursor there for 3 sec. Animating z-index is a slow process because at faster speeds the progressive fading won't be noticeable.

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>

这篇关于使用计数器增量更改 z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！