效果图：

移入：

移出：

<!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. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  2. 在windows中停止mysql提示：'服务正在启动或停止中，请稍候片刻后再试一次'

    发现mysql的windows服务异常,准备卸载并重新注册服务,输入: mysqld --remove MySQL 提示: 发现卸载不掉这个服务,于是找到MySQL服务的pid sc queryex ...

  3. 解决idea中找不到程序包和找不到符号的问题

    问题如图: 解决方法: 将三处编码都设置成UTF-8,亲测有效 本人也是拜读大佬博客后解决的: http://www.cnblogs.com/wzhanke/p/4747966.html

  4. 20155237 2016-2017-2 《Java程序设计》第8周学习总结

    20155237 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 认识NIO Channel: 衔接数据节点(与IO中的流对比) isOpe ...

  5. luogu P2325 [SCOI2005]王室联邦

    传送门 做法是dfs整棵树,当访问一个点\(x\)时,先访问儿子,若某个时刻子树大小\(\ge b\)时,就把那些点放在一个省里,省会记为\(x\),访问完儿子再把\(x\)加入栈.最后栈中剩余的没加 ...

  6. Ubuntu16.04搭建QingdaoU（docker一键式部署）

    QDUOJ已经开源到2.0版本了,下面的教程不再适用,仅做纪念吧! 这几天装什么Linux.开源OJ上瘾了...竟然没去刷题...嗯,做好记录就写题啦! 先上原始网站的图: 风格不错,很符合我的口味. ...

  7. 第16月第24天 find iconv sublime utf-8

    1. find . -type f -exec echo {} \; find src -type f -exec sh -c "iconv -f GB18030 -t UTF8 {} &g ...

  8. Maven打包编译找不到com.sun.crypto.provider.SunJCE类

    Maven配置 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>mav ...

  9. 字符加密 Valentino 函数 （伪分治）

    题面 \(solution:\) 这一题重点不在字符串加密,而是我们最后的求值:\(K^{s}\mod M\)(\(s\leq36^{100000}\)) 而我们发现它的指数十分巨大,但众所周知的指数 ...

  10. Biorhythms HDU - 1370 （中国剩余定理）

    孙子定理: 当前存在三个式子,t%3=2,t%5=3,t%7=2.然后让你求出t的值的一个通解. 具体过程:选取3和5的一个公倍数t1能够使得这个公倍数t1%7==1,然后选取3和7的一个公倍数t2使 ...