js攻城拔寨（一）

最新推荐文章于 2024-04-26 16:47:03 发布

kekegdsz

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量5.3k

点赞数

分类专栏：【web前端】文章标签： javascript

本文链接：https://blog.csdn.net/kekegdsz/article/details/53283859

版权

【web前端】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先我们要了解鼠标在网页里的响应事件：

常见的有以下8个：
mousedown：鼠标的键钮被按下。
mouseup：鼠标的键钮被释放弹起。
click：单击鼠标的键钮。
dblclick：鼠标的键钮被按下。
contextmenu ：弹出右键菜单。
mouseover：鼠标移到目标的上方。
mouseout：鼠标移出目标的上方。
mousemove：鼠标在目标的上方移动。

mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。
这里写图片描述

现在我们要完成上图这个效果

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            list-style: none;
        }

        ul {
            padding: 0px;
            margin: 0px
        }

        .lis {
            width: 80px;
            border: 1px solid black;
            background: #eeeeee
        }

        .lis a {
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            display: block;
            color: black;
        }

        ul ul {
            border: 1px solid black;
            width: 140px;
            display: none;
        }

        ul ul li {
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<ul>
    <li id="lis" class="lis"><a id="link" href="#">微博</a></li>
    <ul id="ul1">
        <li>私信</li>
        <li>评论</li>
        <li>@我</li>
    </ul>
</ul>

<script>

    var li = document.getElementById('lis');
    var ul = document.getElementById('ul1');
    var a = document.getElementById('link');

    li.onmouseover =show;
    li.onmouseout =hide;

    function show(){
        ul.style.display = 'block';
        a.style.background = '#666';
    }

    function hide(){
        ul.style.display = 'none';
        a.style.background = '#f1f1f1';
    }


</script>
</body>
</html>

kekegdsz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js攻城拔寨（一）

首先我们要了解鼠标在网页里的响应事件：常见的有以下8个： mousedown：鼠标的键钮被按下。 mouseup：鼠标的键钮被释放弹起。 click：单击鼠标的键钮。 dblclick：鼠标的键钮被按下。 contextmenu ：弹出右键菜单。 mouseover：鼠标移到目标的上方。
复制链接

扫一扫