如何在：hover检测之后保持计数器递增？

Question

这是我的HTML页面。它们是2个网格，黄色叠加在一起，使用绝对位置和z-index。我正在尝试显示，更改z-index，一个网格或另一个。下面的控制面板使用:hover检测和递增（+），递减（-）或重置（0）计数器。

问题是：如何不在:hover上保持计数器的值，例如将计数器初始化为0，如何在:hover两次开通后如何获得值2？

然后，如何将这些值链接到z-index和#wrapper1的#wrapper2？

body {
  font-family: sans-serif;
  counter-reset: zindex1;
  counter-reset: zindex2;
}

[id^="wrapper"] {
  display: grid;
  grid-template: repeat(4, 50px) / repeat(4, 50px);
}

[id^="wrapper"] > div {
  border: 1px solid black;
}

#wrapper1 {
  position: absolute;
  z-index: 3;
}

#wrapper2 {
  position: absolute;
  z-index: 4;
}

#wrapper1 > div {
  background-color: darkolivegreen;
}

#wrapper2 > div {
  background-color: darkgoldenrod;
}

#px250 {
  height: 250px;
}

#control {
  display: grid;
  grid-template: repeat(3, 50px) / repeat(4, 50px);
}

[id^="nmbr"],
[id^="less"],
[id^="plus"],
[id^="rsst"] {
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
  background: lightgray;
}

[id^="nmbr"] {
  background-color: grey;
}

[id^="less"]:hover {
  background-color: lightcoral;
}

[id^="plus"]:hover {
  background-color: greenyellow;
}

[id^="rsst"]:hover {
  background-color: azure;
}

#less1:hover {
  counter-increment: zinde12 -1;
}

#less2:hover {
  counter-increment: zindex2 -1;
}

#plus1:hover {
  counter-increment: zindex1 1;
}

#plus2:hover {
  counter-increment: zindex2 1;
}

#rsst1:hover {
  counter-reset: zindex1;
}

#rsst2:hover {
  counter-reset: zindex2;
}

#nmbr1 p::after {
  content: " " counter(zindex1);
}

#nmbr2 p::after {
  content: " " counter(zindex2);
}

<!DOCTYPE html>
<html>
  <head>
    <title>PURE CSS</title>
    <meta charset="UTF-8" />
    <link src="./src/styles.css" rel="stylesheet" />
  </head>

  <body>
    <div id="wrapper1">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
      <div>07</div>
      <div>08</div>
      <div>09</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
    </div>

    <div id="wrapper2">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
      <div>07</div>
      <div>08</div>
      <div>09</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
    </div>

    <div id="px250"></div>

    <div id="control">
      <div id="nmbr1"><p>1 :</p></div>
      <div id="less1"><p>-</p></div>
      <div id="plus1"><p>+</p></div>
      <div id="rsst1"><p>0</p></div>
      <div id="nmbr2"><p>2 :</p></div>
      <div id="less2"><p>-</p></div>
      <div id="plus2"><p>+</p></div>
      <div id="rsst2"><p>0</p></div>
    </div>
  </body>
</html>

感谢您的帮助！

Answer 1

由于CSS是无状态的，因此需要使用JavaScript进行所有操作。

如何在：hover检测之后保持计数器递增？

问题描述投票：1回答：1

1个回答

最新问题

如何在：hover检测之后保持计数器递增？

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1