纯CSS用 :target选择器来实现点击事件

先看效果

 代码如下

HTML

<div class="maps-box">
    <div class="kongzhi">
        <a class="a1" href="#img1"><span>01.</span></a>
        <a class="a2" href="#img2"><span>02.</span></a>
        <a class="a3" href="#img3"><span>03.</span></a>
        <a class="a4" href="#img4"><span>04.</span></a>
    </div>
    <div class="map">
        <img class="cs-img" src="./img/无畏契约/map1.png" /><span
            class="cs-span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ascent:亚海悬城</span>
        <p id="img1"><img
                src="./img/无畏契约/map1.png" /><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ascent:
                亚海悬城</span></p>
        <p id="img2"><img
                src="./img/无畏契约/map2.png" /><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bind:
                源工重镇</span></p>
        <p id="img3"><img
                src="./img/无畏契约/map3.png" /><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Haven:
                隐世修所</span></p>
        <p id="img4"><img
                src="./img/无畏契约/map4.png" /><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Split:
                霓虹町</span></p>
        <div class="m5-mask"></div>
    </div>
</div>

CSS

.mps-box {
    width: 1482px;
    margin: 0 auto 0;
    position: relative;
}
.kongzhi {
    position: absolute;
    height: 20px;
    top: 880px;
    z-index: 10;
}

.maps-box a {
    width: 60px;
    height: 6px;
    display: inline-block;
    border: 1px solid #000;
    z-index: 999;
    border-radius: 5px;
}

.kongzhi a span {
    position: absolute;
    top: -40px;
    font-family: DINMedium;
    font-size: 40px;
    color: #000;
    opacity: 0;
}

.kongzhi a:hover span {
    opacity: 1;
    transition: 0.5s;
}

.kongzhi a:hover {
    background-color: #ff4655;
    transition: 0.5s;
}

.map p {
    width: 1184px;
    height: 664px;
    margin-top: -50px;
    margin-left: 135px;
    position: absolute;
    display: none;
    z-index: 8;
}

.map p:target {
    display: block;
}

.map {
    width: 1184px;
    height: 664px;
    position: relative;
}

.m5-mask {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -50px;
    margin-left: 135px;
    width: 1184px;
    height: 100%;
    pointer-events: none;
    z-index: 9;
}

.m5-mask::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/无畏契约/m5-mask.png);
    width: 888px;
    height: 222px;
}

.map p span {
    position: absolute;
    right: -75px;
    bottom: 0;
    display: block;
    width: 370px;
    height: 95px;
    background-color: #8b978f;
    color: #ece8e1;
    font-size: 20px;
    line-height: 95px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.cs-img {
    width: 1184px;
    height: 664px;
    margin-top: -50px;
    margin-left: 135px;
    position: absolute;
    z-index: 7;
}

.cs-span {
    position: absolute;
    right: -210px;
    bottom: 50px;
    display: block;
    width: 370px;
    height: 95px;
    background-color: #8b978f;
    color: #ece8e1;
    font-size: 20px;
    line-height: 95px;
    z-index: 7;
    clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}