<!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. NACOS安装和配置

    安装包nacos-server-1.1.4.tar.gz 环境 JDK1.8 上传及解压 [root@centos7- ~ ]# mkdir -p /cslc/nacos #通过SFTP将安装包上传至 ...

  2. Spring+hibernate+JSP实现Piano的数据库操作---2.Controller+Service+Dao

    Controller package com.controller; import com.entity.Piano; import org.dom4j.rule.Mode; import org.s ...

  3. 自定义placeholder样式

    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozill ...

  4. Bootstrap++：bootstrap-select 使用

    效果图: HTML: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.or ...

  5. goroutine调度源码阅读笔记

    以下为本人阅读goroutine调度源码随手记的笔记,现在还是一个个知识点的形式,暂时还没整理,先发到这里,一点点更新:   1). runq [256]guintptr P 的runable队列最大 ...

  6. sockaddr_in & sockaddr

    #define __SOCKADDR_COMMON(sa_prefix) sa_family_t sa_prefix##family 这个宏用于为套接字地址(socket addresses),如“ ...

  7. PHP+Redis链表解决高并发下商品超卖问题

    目录 实现原理 实现步骤 上一篇文章聊了一下使用Redis事务来解决高并发商品超卖问题,今天我们来聊一下使用Redis链表来解决高并发商品超卖问题. 实现原理 使用redis链表来做,因为pop操作是 ...

  8. 打造静态分析器（二）基于Asp.Net Core 3.0的AspectCore组件检测

    上一篇,我们打造了一个简单的分析器,但是我们实际使用分析器就是为了对项目做分析检测,增加一些非语法的自检的 比如Asp.Net Core 3.0的替换依赖注入检测 设计分析 我们创建一个默认的Asp. ...

  9. Mybais面试题（一）

    1.对于Hibernate和MyBatis的区别与利弊,谈谈你的看法   Hibernate与MyBatis的对比:   1.MyBatis非常简单易学,与Hibernate相对较复杂,门槛较高;   ...

  10. 1. JDK基础说明

    1. JDK基础说明 版本及新特性获取 作为技术人,关注新技术必不可少,那么最佳的途径...看下面. 在 Oracle Java 官方站点有这个非常好的引导地图 官方站点 https://docs.o ...