1

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

.slider {
  counter-reset: index 1000;
}

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

4

2 回答 2

1

counter即使您使用 JavaScript/jQuery，您尝试使用的方式也无法正常工作。这些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>

于 2017-04-23T12:48:22.913 回答
0

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

  1. CSScounter()函数返回 a<string>但该z-index属性正在寻找<integer>.
  2. 无论如何，浏览器并不真正支持它。

MDNcounter()文档指出：

该counter()函数可以与任何 CSS 属性一起使用，但对其他属性的支持content是实验性的，并且对 type-or-unit 参数的支持是稀疏的。

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

于 2019-06-20T21:45:46.953 回答