用JavaScript写出菜单栏收缩功能

最新推荐文章于 2024-06-30 14:04:39 发布

总是看不见

最新推荐文章于 2024-06-30 14:04:39 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/tamofig/article/details/80289655

本文通过一个简单的HTML页面展示了如何使用JavaScript为列表项添加鼠标悬停效果，当鼠标悬停在列表项上时，内容将显示完整，离开时则隐藏多余部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul{
        list-style: none;
    }
    li{
        width: 200px;
        height: 35px;
        float: left;
        background: yellow;
        overflow: hidden;
        line-height: 35px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>动漫
                <div>
                <p>海贼王</p>
                <p>火隐忍者</p>
            </div>
            </li>
            <li>
                明星
                <div>
                    <p>刘昊然</p>
                    <p>陈立农</p>
                </div>
            </li>
        </ul>
    </div>
    <script>
    window.onload=function(){ //在浏览器设置窗口
        var li=document.getElementsByTagName("li");//返回带有指定标签名的对象集合
        for(var i=0;i<li.length;i++){
            li[i].onmouseover=function(){
                console.log(this);//这里的this指的是Windows
                this.style.overflow="visible";
            }
//鼠标移动上去，内容不会被修剪，会呈现在元素框之外
            li[i].onmouseout=function(){
                this.style.overflow="hidden";
//鼠标移除去，内容会被修剪，并且其他内容是不可见的
            }
        }
    }
    </script>
</body>
</html>