2020/09/29 鼠标移入显示二维码或图片移出隐藏

最新推荐文章于 2023-11-16 16:38:40 发布

六月要好好加油呀

最新推荐文章于 2023-11-16 16:38:40 发布

阅读量517

点赞数

分类专栏： # react # js

本文链接：https://blog.csdn.net/Nighsloth/article/details/108876511

版权

react 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

要模仿的效果
代码
-js

-css

-js函数

-最终效果
代码块
js

let showImg = function (e) {
        // console.log("show")
        e.persist()
        // console.log(e.currentTarget)
        // console.log(e.currentTarget.getAttribute("data-id"))
        let id = e.currentTarget.getAttribute("data-id")
        document.getElementsByClassName("QR-positon")[id - 1].style.display = "block"
    }
    let hideImg = function (e) {
        // console.log("hide")
        e.persist()
        let id = e.currentTarget.getAttribute("data-id")
        document.getElementsByClassName("QR-positon")[id - 1].style.display = "none"
    }

-css

/* 二维码 */
.icons-item{
    position: relative;
}

.QR-positon{
    background-color: rgb(232,232,232);
    width: 200%;
    height: 9.375rem;
    position: absolute;
    right:-50% ;
    z-index: 9999;
    top: 50px;
    display: none;
    border: 1px dotted rgb(99,99,99);
}

.QR-positon>p{
    height: 15%;
    line-height: 2.1875rem;
}

.QR-positon>img{
    height: 85%;
    width: 100%;
}