我正在尝试制作一个带有信息的交互式地图。当您单击一个点时，它会调整大小并显示一些联系人。这是因为该元素获得了:active and :focus伪类。
有什么方法可以在第二次单击元素时从元素中删除伪类吗？实际上，是否可以在再次单击元素时关闭元素？
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
top: 20px;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
<div class="distribution-map">
<button class="map-point">
</button>
</div>
这可以通过以下方式实现pointer-events: none;
通过增加pointer-events: none;对于聚焦的元素，您可以有效地停止该元素上的鼠标交互，从而使其在下一次单击时不再聚焦。
需要进行以下修改：
- Add
pointer-events: none; to .distribution-map .map-point:active, .distribution-map .map-point:focus
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
top: 20px;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
pointer-events: none;
}
<div class="distribution-map">
<button class="map-point">
</button>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
