js鼠标悬浮显示移出隐藏案例

最新推荐文章于 2024-10-02 05:39:15 发布

LWT20070526

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量745

点赞数 14

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/LWT20070526/article/details/136627496

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        display: inline-block;
        justify-content: space-around;
    }
</style>

<body>
    <div id="box0">小说</div>
    <div id="box1">非小说</div>
    <div id="box2">少儿</div>

    <ul style="display: none" id="jzh0">
        <li>《123》</li>
        <li>《死人机》</li>
        <li>《不回我信息》</li>
        <li>《见到就狗叫》</li>
        <li>《还爱打人》</li>
        <li>《没有礼貌》</li>
        <li>《不喜欢吃饭》</li>
        <li>《啥也不是》</li>
        <li>《嘴巴巨毒》</li>
    </ul>
    <ul style="display: none;" id="jzh1">
        <li>《超级普信》</li>
        <li>《无语死》</li>
        <li>《中指就没弯过》</li>
        <li>《围城》</li>
        <li>《活着》</li>
        <li>《白夜行》</li>
        <li>《解忧杂货店》</li>
        <li>《边城》</li>
        <li>《新参者》</li>
    </ul>
    <ul style="display: none;" id="jzh2">
        <li>《五体》</li>
        <li>《红楼梦》</li>
        <li>《平凡的世界》</li>
        <li>《围城》</li>
        <li>《活着》</li>
        <li>《白夜行》</li>
        <li>《解忧杂货店》</li>
        <li>《边城》</li>
        <li>《新参者》</li>
    </ul>
    <br>
    <script>
        for (var i = 0; i < 3; i++) {
            document.getElementById("box" + i).onmouseover = function () {
                var ulId = "jzh" + this.id.substring(3); //  this.id.substring(3)表示 获取这个id的第三个数字即为0或者1,2
                document.getElementById(ulId).style.display = "block";
            }
        }

        for (var i = 0; i < 3; i++) {
            document.getElementById("box" + i).onmouseout = function () {
                var ulId = "jzh" + this.id.substring(3); 
                document.getElementById(ulId).style.display = "none";
            }
        }
    </script>
</body>

</html>