html - 链接 Pulse 按钮并使表格消失
问题描述
嘿伙计们,我无法将我的脉冲按钮链接到相应的表格,我的代码已附上,任何人都可以提供一些反馈,说明如何根据点击脉冲按钮一次只显示一个表格?
https://codepen.io/jmrowe0231/pen/KGVYLp
label div.pulse-button {
position:relative;
width: 25px;
height: 25px;
border: none;
box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
border-radius: 50%;
background-color: #00aed6;
background-image: url(http://image.carnivalcruiselineemail.com/lib/fe9513727761047c7c/m/10/plus_icon.png);
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
label[for=Mexico1] div.pulse-button {
left: -143px;
top: -175px;
}
label[for=Mexico2] div.pulse-button {
left: 280px;
top: -192px;
}
label[for=Mexico3] div.pulse-button {
left: -243px;
top: -278px;
}
@ -webkit-keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
@-moz-keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
@-ms-keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
}
@keyframes pulse {
to {
box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
}
解决方案
推荐阅读
- c++ - 访问冲突读取位置(原始指针变量)
- java - 如何在Java中分解多赋值同一行?
- hibernate - @Transactional 中的 Spring Data JpaRepository saveAndFlush 不起作用
- here-api - 如何在 HERE 地图中删除默认 TTS 播放/音频
- angular - 如何使角度(ng zorro v.7)可拖动的蚂蚁设计模式?
- python - 为什么我的 tkinter 回调不返回密码?
- python - 在 Python 中计算多个值的平均值的生成器函数
- flutter - 无法在颤动中显示更新的图像
- spring-data-rest - Spring Data Rest:从实体模型生成资源
- java - 分割后如何从图像中删除小对象