<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

#box{width: 300px;

    height: 300px;

    background: rgb(196, 76, 76);

    border: 1px solid #000000;

     /* display: none; */}

    </style>

    <script src="jquery-3.5.1.js"></script>

</head>

<body>

    <!--onmouseover是鼠标移上时触发函数 -->

    <!-- onmouseout是鼠标移走时触发函数 -->

    <button id="btn" onmouseover="down()" onmouseout="on()" >显示/隐藏盒子</button>

<div id="box">我是盒子</div>

    <script>

        //JavaScript写法

        //display属性可以改变盒子的属性当display为none时隐藏，为block时出现

let oBtn=document.getElementById("btn");

let oBox=document.getElementById("box")

function down (){

    oBox.style.display="block";

}

function on(){

    oBox.style.display="none";

}

    </script>

    <script>

        // jquery 第一种写法

        // 当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

        // 当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

        // 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

        $(function () {

           $("#btn").mouseenter(function () {

               $("#box").show(1000);

               //show(speed,linear,callback);   示例：$("div").hide(1000,"linear",function(){alert("Hide() 方法已完成!")});

            //可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

            // 第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

            //linear:每一步的距离和前一步都是相同的，也就是等速

            //swing:速度会加快然后最后一点距离再减速

            //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

           });

           $("#btn").mouseleave(function () {

               $("#box").hide(1000);

           })

        })

 // jquery 第二种写法

//hover()方法用于模拟光标悬停事件。

// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

//  通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

        $(function () {

            $("#btn").hover(

                function () {

                    $("#box").show(1000,"swing");

                },

                function () {

                    $("#box").hide(1000,"swing");

                }

            )

        })

        // 第三种写法

        // 您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

        //$(selector).toggle(speed,callback);

        //可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

        //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

        $(function () {

        $("#btn").hover(function () {

            $("#box").toggle();

        })

    })

    </script>

</body>

</html>

鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法的更多相关文章

  1. 用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容

    <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...

  2. 鼠标移上显示的下拉菜单，和鼠标移上时显示的导航，html，JavaScript代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  4. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  5. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  6. VC/MFC 当鼠标移到控件上时显示提示信息

    VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法 ...

  7. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  8. 抽屉head部分，hover应用，鼠标放上变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 动态创建div（鼠标放上显示二维码）

    最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...

随机推荐

  1. 动态页面技术（EL/JSTL）

    EL技术 EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本(java代码)的编写. EL从域中取出数 ...

  2. Python3.7安装pyaudio库报错问题及修复

    本人今天在使用python编写语音相关项目是需要引用pyaudio库,结果发现引用失败,刚开始报错内容如下: 说让我升级pip,然后我就按照提示升级了pip,然后又再次尝试安装pyaudio库,然后还 ...

  3. 设在起始地址为STRING的存储空间存放了一个字符串（该串已存放在内存中，无需输入，且串长不超过99），统计字符串中字符“A”的个数，并将结果显示在屏幕上。

    问题 设在起始地址为STRING的存储空间存放了一个字符串(该串已存放在内存中,无需输入,且串长不超过99),统计字符串中字符"A"的个数,并将结果显示在屏幕上. 代码 data ...

  4. Kylin Flink Cube 引擎的前世今生

    Apache Kylin™ 是一个开源的.分布式的分析型数据仓库,提供 Hadoop/Spark 之上的 SQL 查询接口及多维分析(OLAP)能力以支持超大规模数据,它能在亚秒内查询巨大的表. Ky ...

  5. PDOStatement::setFetchMode

    PDOStatement::setFetchMode — 为语句设置默认的获取模式.(PHP 5 >= 5.1.0, PECL pdo >= 0.2.0)高佣联盟 www.cgewang. ...

  6. JavaScript正则表达式相关方法

    一.正则表达式方法 var str="abcdefabcdef"; (1)reg.test(str); 查看字符串是否有满足正则表达式的内容,并返回一个布尔值true/false ...

  7. luogu 3188 [HNOI2007]梦幻岛宝珠

    LINK:梦幻岛宝珠 时隔多日 我再次挑战这道题.还是以失败告终. 我觉得这一道背包真的有点难度 这是一个数量较少 但是价值和体积较大的背包. 通常的01背包 要不就是体积小 要么是价值小 但这道题给 ...

  8. OJ评测状态

    Pending/Waiting 排队等待中 Pending Rejudge 答案重判中 Compiling 正在编译 Running/Judging 运行判断中 Accepted(AC) 程序通过 C ...

  9. Redis 超详细总结笔记总

    作者 | 王爷科技 来源 | www.toutiao.com/i6713520017595433485 1. Redis 简介 Redis 是完全开源免费的,遵守 BSD 协议,是一个高性能的 key ...

  10. C# Hello Word

    不管学习什么语言,第一个例子绝对是一个经典的HelloWorld程序那么接下来我们使用 vs studio 2019 来创建一个 HelloWorld 程序 启动vs2019选择 文件-新建-项目-新 ...