个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是我的 HTML 页面。它们是黄色网格叠加的 2 个网格，使用绝对位置和 z-index。我正在尝试显示、更改 z-index、一个网格或另一个。下面的控制面板使用 :hover 来检测和递增 (+)、递减 (-) 或重置 (0) 计数器。
问题是:如何在不在 :hover 之后保持计数器的值，例如将计数器初始化为 0，如何在 :hover 上下移动两次后获取值 2？
那么，如何将这些值链接到 #wrapper1 和 #wrapper2 的 z-index 呢？
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>感谢您的帮助!
最佳答案
您需要在 JavaScript 中完成所有这些工作，因为 CSS 是无状态的。
关于html - 如何在 :hover detection? 之后保持计数器递增，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59301334/
25
4
0
我正在使用 xamarin 表单开发移动应用程序，是否可以检测 Android 中的滑动手势以进行屏幕截图或单击锁定屏幕或主屏幕？ 如果可以通过 Objective C/swift/java 实现，那
我刚刚涉足计算机视觉领域，并试图揭开它的各种复杂性的神秘面纱。我正在尝试使用冲浪特征检测器来增强卡尔曼滤波器。但是我不明白在使用冲浪特征在检测到的帧上构造单应性和有界矩形后如何调用和使用卡尔曼方法。在
问题 我正在尝试使用 opencv2 来检测静止图像中的 PlayStation Move 运动 Controller 。为了增加球体和背景之间的对比度，我决定修改输入图像以自动缩放每个 channe
我正在制作一个 android 应用程序，它可以从从视频中捕获的图像帧中检测对象。 openCV中的示例应用只有实时检测的例子。 附加信息:-我正在使用 Haar 分类器 截至目前，我正在将捕获的帧存
我在我的测试应用程序中成功实现了 OpenCV 平方检测示例，但现在需要过滤输出，因为它非常困惑 - 还是我的代码错误？ 我对论文的四个角点感兴趣，以减少偏斜(如 that)和进一步处理......
在我的应用程序中，我想对 UIImage 使用人脸检测，所以我使用库中的 CoreImage 构建(我知道 Vision Library 也是最新的人脸检测库。但它仅支持 ios 11.0 及以上)。
我的 Linux 3.0/glibc 2.13 应用程序因以下形式的错误而停止: *** glibc detected *** MYAPP: double free or corruption (fa
我正在尝试运行一个基本程序来检测用户是否安装了 window.ethereum。当我运行我的程序时，我得到“@metamask/detect-provider:无法检测到 window.ethereu
我正在使用 Haarcascades 检测人脸和眼睛。我的问题是，它像眼睛一样包围了许多盒子。我的语法是 face_cascade = cv2.CascadeClassifier('haarcasca
我如何检测用户在对话中点击“消息”？ 如果 MessageViewController Controller 很紧凑并且用户向上滑动我如何检测到它？ 我试过这些代表，但它不能正常工作 override
我在对象检测中使用 Microsoft 自定义视觉服务来提取需要的对象。我想做一个回归测试来比较结果。但是，我找不到一个地方可以导出带有用户通过 GUI 定义的边界框的训练图片。 模型训练是在 Mic
我对 chrome 进行了扩展。当我浏览到 https 下的网站时，我的链接仍在 http 下，我收到:“该站点使用 SSL，但 Google Chrome 检测到页面上存在高风险不安全内容或站点证书
我用的是JetBrains的Gogland工具来学习go语言，我安装成功了，但是打不开，现将报错列如下，有没有人遇到过这个问题？如能解决，将不胜感激。 错误: Java 运行时环境检测到 fatal
我想在 R 中评估和比较我的社区检测算法的结果。我的算法不允许重叠，并且有一些节点没有被处理。例如，对于 Zachary 空手道俱乐部，我有 1 个节点未处理。我找到了很多指标(NMI、ARI、Mod
是否有任何好的开源引擎来检测文本使用的语言，也许是概率度量？我可以在本地运行并且不查询 Google 或 Bing 的一个？我想在大约 1500 万页的 OCR 文本中检测每个页面的语言。 并非所有文
我正在开发一款 2D 游戏，其中包含高速射弹，这些射弹会撞击高速(并且可能旋转得非常快)的多边形目标对象。我一直在试验和寻找适合我的强大碰撞检测算法。 如果快速旋转不是一个因素(即 0 或慢速旋转)，
我正在制作一款平台游戏，其中有玩家和一些 Prop 。为了检查碰撞，我使用了 matterjs collisionactive 函数: this.matter.world.on("collisiona
我已经习惯于使用矩形进行碰撞检测，现在我有点难住了。我正在处理类似菱形的形状，在过去的几个小时里，我一直在试图找出如何检查碰撞。 我尝试检查第一个对象的四个点是否在第二个对象的点内，但这只是一个框(我
最初，两个半径为 R1 和 R2 的非接触球体处于静止状态。 然后在时间 = 0 时分别给它们两个加速度 a1 和 a2。查明他们是否会接触。它们的初始位置分别表示为 (x1,y1,z1) 和 (x2
我目前正在学习使用 LWJGL 和 OpenGL 的 ThinMatrix 3d 游戏开发教程。我正在尝试在我的游戏中实现碰撞检测。我已经准备好检测 AABB 与 AABB 碰撞的代码，但似乎无法弄清
我是一名优秀的程序员,十分优秀！