Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个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效果的更多相关文章
- jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...
- checkbox下面的提示框 鼠标移入时显示,移出时隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- baidu 地图 鼠标移上显示标签 鼠标离开隐藏标签
为了解决 label太多,文字会重叠看不清 所以提出这种办法 核心代码 1,创建的时候 将label设置为隐藏 2,通过百度地图监听事件 , mouseover或onmouseover 触发显示 3 ...
- jQuery实现鼠标点击Div区域外隐藏Div
冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...
- jQuery点击div其他地方隐藏div
$(document).bind("click",function(e){ var target = $(e.target); ){ $("#regionlist&quo ...
- js实现的点击div区域外隐藏div区域(转)
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...
- js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...
- css样式控制鼠标滑过显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery显示、隐藏div的方法
$("#top_notice").css("display", "block");//第1种方法 //$("#top_notice ...
随机推荐
- 终端改变host的类型,还原
- tyvj1614 魔塔魔塔!
描述 百度noip贴吧管理组开发了一个小游戏,叫魔塔魔塔.虽然把魔塔重复了两次,但其实还只是个魔塔而已,还是简化版的.游戏在一个N*M大小的地图中进行,每一格都是正方形.对于某一格,有若干种可能的状态 ...
- 使用 Flexbox 的居中布局
- 【PHP面向对象(OOP)编程入门教程】9.封装性(var与public,protected,private的关系)
封装性是面象对象编程中的三大特性之一,封装性就是把对象的属性和服务结合成一个独立的相同单位,并尽可能隐蔽对象的内部细节,包含两个含义: 1. 把对象的全部属性和全部服务结合在一起,形成一个不可分割的独 ...
- CentOS编译安装Apache 2.4.x时报错:configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.
先前按照这篇文章“CentOS6.x编译安装LAMP(2):编译安装 Apache2.2.22”去编译安装Apache2.2.x版本时,安装得挺顺利,今天换成Apache2.4.x版本,安装方法一样, ...
- php访问全局变量
函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问. 函数内部声明的变量拥有 LOCAL 作用域,只能在函数内部进行访问. PHP 同时在名为 $GLOBALS[index] 的数组 ...
- HDU 4941 Magical Forest(map映射+二分查找)杭电多校训练赛第七场1007
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4941 解题报告:给你一个n*m的矩阵,矩阵的一些方格中有水果,每个水果有一个能量值,现在有三种操作,第 ...
- SQL 多表一起查询的语句总结
sql 同时查询多个表 可以使用连表查询比如使用join sql 同时查询多个表 可以使用连表查询 比如 使用join select s1.*,s2.* from s1 left join s2 on ...
- BZOJ 3665: maths
Sol 矩阵乘法+快速幂+欧拉定理. 首先观察题目可以发现 \(A_n\) 可以表示成关于 \(K\) 和 \(A_0\) 的几次幂的形式. \(A_0\) 就比较简单了 \(m^n\) 所以第一部分 ...
- 25 BasicUsageEnvironment0基本使用环境基类——Live555源码阅读(三)UsageEnvironment
25 BasicUsageEnvironment0基本使用环境基类——Live555源码阅读(三)UsageEnvironment 25 BasicUsageEnvironment0基本使用环境基类— ...