有时候我们需要这个效果：当鼠标放上去的时候显示一个div，当鼠标移走的时候就将div隐藏了。代码如下，记得引入Jquyer库。（当鼠标移动到id=menu的div上的时候，显示id=list的div，然后将鼠标再次移动到id=list的div上的时候，list的div也不会隐藏）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        <!--
        $(function () {
            $("#list").hide();
            $("#menu").hover(function () {
                $("#list").show();
            }, function () {
                $("#list").hide();
            })
            // 鼠标移动到list的div上的时候list div不会被隐藏
            $("#list").hover(function () {
                $("#list").show();
            }, function () {
                $("#list").hide();
            })
        });
        //-->
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="menu" style="width: 300px; height: 100px; border: 1px solid red;">
        </div>
        <div id="list" style="width: 300px; height: 300px; ">
        </div>
    </div>
    </form>
</body>
</html>

Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果的更多相关文章

  1. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  2. checkbox下面的提示框 鼠标移入时显示，移出时隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. baidu 地图 鼠标移上显示标签 鼠标离开隐藏标签

    为了解决 label太多,文字会重叠看不清 所以提出这种办法 核心代码 1,创建的时候 将label设置为隐藏 2,通过百度地图监听事件 ,  mouseover或onmouseover 触发显示 3 ...

  4. jQuery实现鼠标点击Div区域外隐藏Div

    冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...

  5. jQuery点击div其他地方隐藏div

    $(document).bind("click",function(e){ var target = $(e.target); ){ $("#regionlist&quo ...

  6. js实现的点击div区域外隐藏div区域(转)

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...

  7. js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...

  8. css样式控制鼠标滑过显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery显示、隐藏div的方法

    $("#top_notice").css("display", "block");//第1种方法 //$("#top_notice ...

随机推荐

  1. IGV软件

    它支持各种各样的数据类型,包括基于芯片测序.二代测序数据和基因组注释数据等.整合基因组浏览器(IGV,Integrative Genomics Viewer)进行可视化浏览,它支持各种各式的数据类型, ...

  2. HDOJ 3709 Balanced Number

    数位DP... Balanced Number Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java ...

  3. <a>标签跳转传值。

    <a href="public_html/app/Tpl/song_1/inc/{url r="deal#support" p="id=$deal_inf ...

  4. Magic Number（Levenshtein distance算法）

    Magic Number Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  5. win7下搭建web服务器

    简介 微软为了操作系统的安全,默认把web.ftp等服务默认关闭了,重新打开也非常简单. step 1 打开控制面板: step 2: step 3: step 4: 单击确定之后等个几分钟,web服 ...

  6. Android开发学习笔记--一个有界面A+B的计算器

    做了一个A+B的APP,虽然很简单,但是作为初学者还是弄了几个小时才弄好,什么东西都要看书或者百度,但最后成功了,还是很开心的,收货蛮大的.现在把过程写一下: 首先给出效果图: 一开始布局一直有问题, ...

  7. UNITY3D在线更新之道-CSlight 使用总结

    转自:http://blog.csdn.net/leonwei/article/details/39233775 最近做U3D的热更新,研究了各种方式无果后,最容易最先想到的方式就是利用c#的反射机制 ...

  8. 【原创】ReFlux细说

    ReFlux细说 Flux作为一种应用架构(application architecture)或是设计模式(pattern),阐述的是单向数据流(a unidirectional data flow) ...

  9. PHP5.4开启zend opcache缓存

    PHP5.5整合了zend opcache,但是5.4以下的需要自己安装. 介绍一下开启opcache方法,环境为wamp(php5.4.16) 下载dll文件 把php_opcache.dll放进p ...

  10. 5.5---整数A转成整数B（CC150）

    自己的: public static int calcCost(int A,int B){ int ans = 1; int temp = A ^ B; while(temp != 1){ if(te ...