效果图：

移入：

移出：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标移入移出展现与收起效果</title>

    <style type="text/css">

        body{

            margin: 0 auto;

            padding: 0;

        }

        #pn{

            background: #e8e8e8;

            width: 600px;

            display: block;

            margin: 0 auto;

            padding: 5px;

            font-size: 9pt;

            height: auto;

        }

        .slide{

            margin: 0 auto;

            padding: 0;

            width: 600px;

            border-top: 4px solid gray;

        }

        .btn-slide{

            background: gray;

            width:120px;

            height: 30px;

            text-align: center;

            margin: 0 auto;

            display: block;

            color: #fff;

            text-decoration: none;

            padding-top: 10px;

        }

    </style>

    <script type="text/javascript">

    function showdiv(){

        document.getElementById("hpn").style.display="block";

        document.getElementById("strHref").innerHTML="收起-";

    }

    function hidediv(){

        document.getElementById("hpn").style.display="none";

        document.getElementById("strHref").innerHTML="更多选项+";

    }

    </script>

</head>

<body>

    <div class="slide">

        <a onmouseover="showdiv();" id="strHref" class="btn-slide">更多选项+</a>

        <div id="pn">

            <div id="hpn" onmouseout="hidediv()" style="display:none">

                <p>价格：5000以上 4000-4999 3000-3999</p>

                <p>特点：JDPhone计划‘0’元购机 放水</p>

            </div>

        </div>

    </div>

</body>

</html>

div展现与收起效果（鼠标移入移出）的更多相关文章

  1. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  2. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  4. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  5. Vue中通过鼠标移入移出来添加或取消class样式（active）

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

  6. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  7. # li鼠标移入移出，点击，变背景色，变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  8. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  9. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

随机推荐

  1. NGUI的UIRoot会移动

    我在做一个游戏的时候,发现NGUI的UIRoot会自己移动位置,最初创建UIRoot的时候是可以随便拖动的,只要它自己移动了位置,你就拖不动它了,而且UIRoot下面的摄像机也会变成类似主摄像机之类的 ...

  2. Hbase记录-HBase扫描/计数/权限

    HBase扫描   scan 命令用于查看HTable数据.使用 scan 命令可以得到表中的数据.它的语法如下: scan ‘<table name>’ 下面的示例演示了如何使用scan ...

  3. Hbase记录-Hbase shell使用

    HBase Shell HBase包含可以与HBase进行通信的Shell. HBase使用Hadoop文件系统来存储数据.它拥有一个主服务器和区域服务器.数据存储将在区域(表)的形式.这些区域被分割 ...

  4. Log4j Threshold属性指定输出等级

    有时候我们需要把一些报错ERROR日志单独存到指定文件 ,这时候,Threshold属性就派上用场了: Threshold属性可以指定日志level Log4j根据日志信息的重要程度,分OFF.FAT ...

  5. 运用Zabbix实现内网服务器状态及局域网状况监控（5） —— Zabbix监控路由器

    1. 首先在zabbix服务器端安装snmp工具 [root@zabbix ~]# yum -y install net-snmp-utils net-snmp-libs net-snmp-devel ...

  6. python线程，pipe管道通信原理

    Pipe管道: * 管道实例化后会产生两个通道,分别交给两个进程* 通过send和recv来交互数据,这是一个双向的管道,child和parent可以互相收发 from multiprocessing ...

  7. ServiceMesh了解一下

    http://www.servicemesh.cn/?/article/70 https://zhuanlan.zhihu.com/p/33196550

  8. 论文笔记系列-Simple And Efficient Architecture Search For Neural Networks

    摘要 本文提出了一种新方法,可以基于简单的爬山过程自动搜索性能良好的CNN架构,该算法运算符应用网络态射,然后通过余弦退火进行短期优化运行. 令人惊讶的是,这种简单的方法产生了有竞争力的结果,尽管只需 ...

  9. Hadoop的RPC机制及简单实现

    1.RPC简介 Remote Procedure Call 远程过程调用协议 RPC——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些 ...

  10. Linux动态频率调节系统CPUFreq之一：概述【转】-- 非常好的博客

    转自:http://blog.csdn.net/droidphone/article/details/9346981     目录(?)[-] sysfs接口 软件架构 cpufreq_policy ...