Change z-index with counter-increment

问题

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

回答1:

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 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.

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.

Snippet

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>

回答2:

This is a neat idea, but runs into one or two problems:

The CSS counter() function returns a <string> but the z-index property is looking for an <integer>.
Browsers don't really support it anyway.

The MDN counter() docs note that:

The counter() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

It's not completely clear what they mean by "the type-or-unit parameter" since none is discussed on that page. The attr() function does allow returning alternate types (e.g. an integer) via a <type-or-unit> parameter. I wonder if someone was toying with adding the same parameter to counter() at some point; if so, this appears to have been abandoned long ago.

来源：https://stackoverflow.com/questions/43569452/change-z-index-with-counter-increment

标签

css

z-index

css-counter