<!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. vue -电子时钟

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

  2. Python之生成器、迭代器

    生成器 生成器类似返回值为数组的一个函数,这个函数可以接受参数,可被调用,但只能产生一个值,所以大大节省内存. 生成器表达式的语法非常简单,只需要将列表推导式的中括号改成小括号就可以了 [x+x fo ...

  3. 关于android的监听器

    import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bu ...

  4. Seaborn实现单变量分析

    import numpy as np import pandas as pd from scipy import stats,integrate import matplotlib.pyplot as ...

  5. Python os.renames() 方法

    概述 os.renames() 方法用于递归重命名目录或文件.类似rename().高佣联盟 www.cgewang.com 语法 renames()方法语法格式如下: os.renames(old, ...

  6. PHP is_string() 函数

    is_string() 函数用于检测变量是否是字符串. PHP 版本要求: PHP 4, PHP 5, PHP 7高佣联盟 www.cgewang.com 语法 bool is_string ( mi ...

  7. 添加entity实体时报错未能找到 EntityFramework.dll

    错误 1 正在编译转换: 未能找到元数据文件“C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Tools\..\IDE\Enti ...

  8. linux的用户扩充权限管理acl和用户使用系统资源的限制

    用户扩充权限管理 acl 1.扩充权限的方式 文件扩充权限 ACL 磁盘配额 2.文件扩充权限 1.安全位 安全位   ---set位    SUID  SGID   set仅可以加给 u.g, 如: ...

  9. LeetCode 87，远看是字符串其实是搜索，你能做出来吗？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第54篇文章,我们一起来看LeetCode 87题,Scramble String(爬行字符串). 这题的官方难度 ...

  10. django--各个文件的含义

    当你创建项目或者应用后你是不是发现多了很多个文件,现在我们来看看各代表什么意思 与你项目名相同的文件夹:是项目的管理功能目录,这个目录的名称因用户所创建的项目名称的不同而不同 在该目录下还有四个文件: ...