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

这段代码展示了使用HTML和CSS创建的一个地图导航界面,包括四个无畏契约游戏地图的切换:Ascent(亚海悬城)、Bind(源工重镇)、Haven(隐世修所)和Split(霓虹町)。每个地图都有详细的图片和描述,并且可以通过链接在页面上显示或隐藏。
摘要由CSDN通过智能技术生成

先看效果

 代码如下

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));
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值