利用JS实现鼠标移入展示用于介绍的文本的样式

介绍：当鼠标移入目标区域后，会展示出对目标区域内容的文本（利用html的标签展示文本）

html与css部分

    <div style="width: 25%;border: solid 1px black; " id="lol"><img style="height: 290px;width: 100%;" src="../素材库/英雄联盟.webp" alt=""></div>  为了方便理解，这里直接在div标签中添加style样式。同时给四组标签分别命名id名
    <div style="width: 25%;border: solid 1px black; " id="dot"><img style="height: 290px;width: 100%;" src="../素材库/DOTA2.webp" alt=""></div>   
    <div style="width: 25%;border: solid 1px black; " id="her3"><img style="height: 290px;width: 100%;" src="../素材库/300英雄.webp" alt=""></div>
    <div style="width: 25%;border: solid 1px black; " id="stomszdcx"><img style="height: 290px;width: 100%;" src="../素材库/风暴英雄.webp" alt=""></div>
       
       //    上面是四个目标图片及其基本注释

       //    下面是各个板块的注释，初始时只有第一块显示。之后只有当鼠标指在对应的图片时，才会
       
        <span style="background-color: rgba(255, 255, 255, 0);width: 500px; height: 1000px;" id="la">
        <h1>英雄联盟-LOL</h1>
        <p>这是英雄联盟，这是英雄联盟这是英雄联盟。这是英雄联盟这是英雄联盟这是英雄联盟，这是英雄联盟。</p>
    </span>

    <span style="background-color: rgba(255, 255, 255, 0);width: 500px; height: 1000px;display: none;" id="da">
        <h1>DOTA2</h1>
        <p>这是DOTA2，这是DOTA2这是DOTA2这是DOTA2。这是DOTA2这是DOTA2,这是DOTA2这是DOTA2;这是DOTA2这是DOTA2这是DOTA2(这是DOTA2)这是DOTA2这是DOTA2这是DOTA2.</p>
    </span>

    <span style="background-color: rgba(255, 255, 255, 0);width: 500px; height: 1000px;display: none;" id="he">
        <h1>300HERO</h1>
        <p>这是300HERO300HERO，这是300HERO这是300HERO这是300HERO。这是300HERO“这是300HERO这是300HERO！”这是300HERO这是300HERO这是300HERO这是300HERO；这是300HERO这是300HERO；这是300HERO这是300HERO这是300HERO。</p>
    </span>

    <span style="background-color: rgba(255, 255, 255, 0);width: 500px; height: 1000px;display: none;" id="st">
        <h1>风暴英雄</h1>
        <p>这是风暴英雄这是风暴英雄这是风暴英雄，这是风暴英雄这是风暴英雄这是风暴英雄这是风暴英雄。这是风暴英雄：这是风暴英雄这是风暴英雄这是风暴英雄这是风暴英雄；这是风暴英雄这是风暴英雄！这是风暴英雄这是风暴英雄（这是风暴英雄）</p>
    </span>

---

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins',sans-serif;
        }
        
        div{
            float: left;
        }

上面是对页面进行基础设置的CSS语言

---

JS部分

        document.querySelector('#lol').addEventListener('mouseenter',laenteraHandler) //为第一个id名为div的标签设置鼠标进入的事件
        document.querySelector('#lol').addEventListener('mouseleave',laleaveaHandler) //为第一个id名为div的标签设置鼠标离开的事件
        let la = document.getElementById('la'); //从body中获取id值la
        function laenteraHandler(e) {           //为la的鼠标进入事件设置函数 
            la.style.display = 'inline'                     
            console.log(123)
        }
        function laleaveaHandler(e){
            la.style.display = 'none'           //为la的鼠标进入事件设置函数
            console.log(456)
        }

//下面每一块的原理都是相同的，与上面一致
        document.querySelector('#dot').addEventListener('mouseenter',daenteraHandler)
        document.querySelector('#dot').addEventListener('mouseleave',daleaveaHandler)
        let da = document.getElementById('da');
        function daenteraHandler(e) {
            da.style.display = 'inline'
            console.log(123)
        }
        function daleaveaHandler(e){
            da.style.display = 'none'
            console.log(456)
        }


        document.querySelector('#her3').addEventListener('mouseenter',heenteraHandler)
        document.querySelector('#her3').addEventListener('mouseleave',heleaveaHandler)
        let he = document.getElementById('he');
        function heenteraHandler(e) {
            he.style.display = 'inline'
            console.log(123)
        }
        function heleaveaHandler(e){
            he.style.display = 'none'
            console.log(456)
        }


        document.querySelector('#stomszdcx').addEventListener('mouseenter',stenteraHandler)
        document.querySelector('#stomszdcx').addEventListener('mouseleave',stleaveaHandler)
        let st = document.getElementById('st');
        function stenteraHandler(e) {
            st.style.display = 'inline'
            console.log(123)
        }
        function stleaveaHandler(e){
            st.style.display = 'none'
            console.log(456)
        }

效果如下

Rec 0004