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 ...
随机推荐
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- QT连接Linux mysql注意
windows: #define MYSQLDB "QMYSQL"#define MYSQLDB_HOSTNAME "192.168.228.168"#defi ...
- Ruby学习之module
我们可以认为module是一个专门存放一系列方法和常量的工具箱. module和class非常像, 只是module不能创建实例也不能有子类, 它们仅仅能存放东西. 例如: module Circle ...
- 怎样更改wordpress登陆 URL防止恶意注册
WP 默认的登陆 URL 是 wp-login.php或wp-admin.php,许多spamer会根据这些footprint来收集可注册的wordpress站点,然后你的站内就多出许多垃圾评论.如果 ...
- Spark之scala
一.什么是scala scala 是基于JVMde 编程语言.JAVA是运行在jvm上的编程语言,java 源代码通过jvm被编译成class 文件,然后在os上运行class 文件.scala是运行 ...
- 【血的教训】玩 Ubuntu 遇到的致命问题(进不了系统)及 解决方案
[问题1] 按照文章“U盘安装Windows 7 + Ubuntu 14 双系统笔记”在 Windows 7 基础上安装了 Ubuntu 14 系统,实现双系统切换,某一天, 通过如下命令行 sudo ...
- Objective-C上地球坐标系到火星坐标系转换算法
Objective-C上地球坐标系到火星坐标系转换算法 http://blog.csdn.net/zhaoxy_thu/article/details/17033347
- Knockout.Js案例三单页面应用程序
<ul data-bind="foreach: folders"> <li data-bind="text: $data">& ...
- 如何优雅地使用 Sublime Text
Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比 于难于上手的Vim,浮肿沉重的Ecli ...
- linux kernel 杂谈
首先介绍一下背景吧,工作三个星期了.复习了一波u-boot,跟了一下事件上报,搞了下平台设备,扣了一个内存检查代码. 想想生活是不是有点无聊.对啊,真的很无聊!!!! 无聊也没有办法啊,所以找点方法去 ...