<!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. redis,rabbitmq,SqlAlchemy

    redis发布和订阅

  2. SpringBoot+Vue项目上手

    博客 https://gitee.com/RoadsideParty/White-Jotter-Vue?_from=gitee_search UI框架 https://at-ui.github.io/ ...

  3. Dom运用1

    1.简单计算器 <!-- 第一个数--> <input type="text"> <!-- 符号复选框--> <select name=& ...

  4. Git 提交、删除、切换命令

    1.将本地代码提交到远程仓库 [初始将文件修改上传到远程仓库] 初始化: git init 添加到暂存区: git  add . 提交到仓库: git commit -m 'first commit' ...

  5. 进度条函数 -------ajax初试

    做一个显示任务完成情况的进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  6. PHP array_slice() 函数

    实例 从数组的第二个元素开始取出,并返回直到数组末端的所有元素: <?php$a=array("red","green","blue" ...

  7. PHP jdtounix() 函数

    ------------恢复内容开始------------ 实例 把格利高里历法的日期转换为儒略日计数,然后把儒略日计数转换为 Unix 时间戳: <?php$jd=gregoriantojd ...

  8. mybatis plus 更新值为null的字段

    转载请注明出处: 由于mybatis plus调用默认的更新操作方法时,不更新值为空,null或默认值等得属性字段,只更新值为非null,非空非默认值的属性字段. 以下为mybatis plus sa ...

  9. 调用thrift出现No handlers could be found for logger "thrift.transport.TSocket"

    1.问题 使用thrift版本为0.10,在0.8没有这个问题 其中ncTAgent是代码中封装的thrift接口的结构,在thrift服务端没有启动的时候,应该拋错为连接不到.但是拋错的堆栈输出之前 ...

  10. Python使用Tornado+Redis维护ADSL拨号服务器代理池

    们尝试维护过一个免费的代理池,但是代理池效果用过就知道了,毕竟里面有大量免费代理,虽然这些代理是可用的,但是既然我们能刷到这个免费代理,别人也能呀,所以就导致这个代理同时被很多人使用来抓取网站,所以当 ...