DOM之鼠标事件

最新推荐文章于 2022-07-19 10:53:54 发布

Doris ampson

最新推荐文章于 2022-07-19 10:53:54 发布

阅读量1.3k

点赞数 1

分类专栏： js学习

本文链接：https://blog.csdn.net/qq_34376264/article/details/77752686

版权

本文主要介绍了JavaScript中的鼠标事件，通过实例展示了如何实现下拉框效果以及切换显示内容的交互。下拉框效果利用鼠标移入和移出事件，使得菜单在鼠标悬停时显示，离开时隐藏。同时，讲解了点击事件的应用，实现点击‘点击设置’显示图二内容，图二中的按钮点击产生相应变化，‘确定’按钮用于隐藏设置div。

摘要由CSDN通过智能技术生成

一.鼠标事件
今天的js课上主要讲了js的函数、鼠标事件及应用。
现将常用的鼠标事件总结如下：

onclick:鼠标点击事件
onmouseover:鼠标移入事件
onmouseout:鼠标移出事件
onmousedown:鼠标按下事件
onmouseup:鼠标释放事件
onmousemove:鼠标拖拽移动事件
 
 
 
  1
  2
  3
  4
  5
  6
 
 
 
 
  1
  2
  3
  4
  5
  6

具体内容，全部都以例子的方式呈现：

1.做一个下拉框效果：
首先分析题意，下拉框效果就是鼠标移入链接元素时本来隐藏的菜单显示出来，而鼠标移出时菜单继续隐藏。
代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#div{
    width:120px;}
body{
    margin:0;}
a{ text-decoration:none;}
.link1{
    display:block; width:100px; height:50px; background:#FF0; text-align:center;}
body ul{
    margin:0; padding:0;display:none;}
body ul li{
    list-style:none;width:100px; height:30px; background:#0F0;}
</style>
<title>无标题文档</title>
</head>

<body>
    <div id="div">
        <a class="link1" href="#">公司简介</a>
        <ul id="ul1">
            <li><a href="#">发展历史</a></li>
            <li><a href="#">发展历史</a></li>
            <li><a href="#">发展历史</a></li>
            <li><