<!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. lua 表

    最近在尝试配置 awesome WM,因此粗略地学习了一下 lua . 在学习过程中,我完全被表表在 lua 中的应用所镇住了. 表在 lua 中真的是无处不在:首先,它可以作为字典和数组来用:此外, ...

  2. Java中的锁机制

    1.在Java中锁的分类 其实就是按照锁的特性分类的 公平锁,非公平锁 可重入锁 独享锁,共享锁 互斥锁,读写锁 乐观锁,悲观锁 分段锁 偏向锁,轻量级锁,重量级锁 自旋锁 相关资料:思维导图 使用场 ...

  3. 干货 | 这可能全网最好的BatchNorm详解

    文章来自:公众号[机器学习炼丹术].求关注~ 其实关于BN层,我在之前的文章"梯度爆炸"那一篇中已经涉及到了,但是鉴于面试经历中多次问道这个,这里再做一个更加全面的讲解. Inte ...

  4. 五天一体_企业权限管理(SSM整合)

    学于黑马程序员和传智播客联合做的教学项目 感谢 黑马程序员官网 传智播客官网 个人根据教程的每天的工作进度的代码和资料 密码:cti5 b站在线视频 微信搜索"艺术行者",关注并回 ...

  5. Python break语句

    Python break语句:当运行到 break 语句时,终止包含 break 的循环语句. 注:无论判断条件是否达到 False 或 序列是否遍历完都会停止执行循环语句和该 break 下的所有语 ...

  6. Python os.dup2() 方法

    概述 os.dup2() 方法用于将一个文件描述符 fd 复制到另一个 fd2.高佣联盟 www.cgewang.com Unix, Windows 上可用. 语法 dup2()方法语法格式如下: o ...

  7. PHP cal_info() 函数

    ------------恢复内容开始------------ 实例 返回格利高里历法的信息: <?phpprint_r(cal_info(0));?> 运行实例 » 定义和用法 cal_i ...

  8. luogu P4775 [NOI2018]情报中心 线段树合并 虚树 树的直径trick

    LINK:情报中心 神题! 写了一下午 写到肚子疼. 调了一晚上 调到ex 用的是网上dalao的方法 跑的挺快的. 对于链的暴力 我不太会kk. 直接说正解吧: 分类讨论两种情况: 1 答案的两条链 ...

  9. luogu P1526 [NOI2003]智破连环阵 搜索+最大匹配+剪枝

    LINK:智破连环阵 考试的时候 题意没理解清楚 题目是指一个炸弹爆炸时间结束后再放另一个炸弹 而放完一个炸弹紧接另一个炸弹.题目中存在然后二字. 这样我们可以发现某个炸弹只会炸连续的一段. 但是 由 ...

  10. dp的本质

    什么是真正的dp?有什么特点?怎么来搞. 最近遇到了一些以前的题目发现没有好好的理解就直接写了 大多都是书上的算法并不是自己真正的理解. 1 关于背包 我总结一下 可能 有助于对模型的更快发现 01 ...