jQuery应用实例3：鼠标经过显示离开隐藏
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://www.51rgb.com/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#list").hide();
//hover(mouseover,mouseout)
$("#menu").hover(function () {
$("#list").slideDown();//slieDown():慢慢出现，还有slideUp，注意大小写
}, function () {
$("#list").hide();
})
// 鼠标移动到list的div上的时候list div不会被隐藏
$("#list").hover(function () {
$("#list").show();
}, function () {
$("#list").hide();
})
});
// $(function () {
// $(".menu_right").mouseover(function () {
// $(".menu_right img").attr("src", "guowuche_cheng.jpg");
// $(".menu_right span").addClass("guowuche_sp");
// $(".menu_right ").addClass("guowuche_bg");
// //$(".menu_right>div").addClass("guowuchecontent");
// $(".menu_right>div").slideDown();
// })
// $(".menu_right").mouseout(function () {
// $(".menu_right img").attr("src", "guowuche_hui.jpg");
// $(".menu_right span").removeClass("guowuche_sp");
// $(".menu_right ").removeClass("guowuche_bg");
// // $(".menu_right>div").removeClass("guowuchecontent");
// })
// $("body").mouseover(function (e) {
// if ($(e.target).closest(".menu_right").length === 0) {
// $(".menu_right>div").slideUp();
// }
// })
</script>
</head>
<body>
<div id="menu" style="width: 300px; height: 100px; border: 1px solid red;"></div>
<div id="list" style="width: 300px; height: 300px; background-color: green;"></div>
</body>
</html>
jQuery应用实例3：鼠标经过显示离开隐藏的更多相关文章
- jquery控制css的display属性(显示与隐藏)
jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...
- jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
- -第3章 jQuery方法实现下拉菜单显示和隐藏
知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...
- jquery通过visible来判断标签是否显示或隐藏
if($(".spnTotal").is(":visible")==false) { alert('隐藏'); } else { alert('显示'); }
- jQuery鼠标经过显示大图
效果:http://keleyi.com/keleyi/phtml/image/8.htm 以下是完整代码: <!DOCTYPE html> <html lang="en& ...
- jquery接触初级-----juqery DOM操作实例，动态图片显示
1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...
- jQuery实现鼠标悬停显示提示信息窗口的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery鼠标悬停显示提示信息窗体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 十分钟玩转 jQuery、实例大全(参考自博主索宁)
十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...
随机推荐
- java线程入门知识
为什么需要多线程? . 模型的简化,如某些程序是由多个相对独立任务的运行: . 图形界面的出现,输入.输出的阻塞 . 多核CPU的更好利用 . 异步行为的需要 Java多线程的特性: . 程序的入口m ...
- 转载：关于 python ImportError: No module named 的问题
关于 python ImportError: No module named 的问题 今天在 centos 下安装 python setup.py install 时报错:ImportError: N ...
- IAAS: IT公司去IOE-Alibaba系统构架解读
从Hadoop到自主研发,技术解读阿里去IOE后的系统架构 原地址:...................... 云计算阿里飞天 摘要:从IOE时代,到Hadoop与飞天并行,再到飞天单集群5000节 ...
- css3实现动画滚动条
先给大家一张效果图,看似简单,其实实现起来....那也是非常简单的~简单又实用 黑框里面的字体会自动滚动,形成滚动条,可以用于展示和提示,首先我们先要在body里面写上自己想要的文字,比如我想写:感觉 ...
- Debian 6 , 十个串口为什么只识别到了 6个 剩下4 个被禁止了
0.946441] Serial: 8250/16550 driver, 6 ports, IRQ sharing enabled [ 0.946533] serial8250: ttyS0 a ...
- vc++实例创建简单窗体
#include<windows.h>#include<stdio.h>LRESULT CALLBACK WinSunProc(HWND hwnd,UINT uMsg,WPAR ...
- Python基础学习_01修改代码所属作者
1.修改开头的作者Author 2.具体步骤如下图 (1)点击下图所画的按钮 (2)具体操作如图所示,就可以得到自己想要的结果了.
- 数据结构(1) 第一天 算法时间复杂度、线性表介绍、动态数组搭建(仿Vector)、单向链表搭建、企业链表思路
01 数据结构基本概念_大O表示法 无论n是多少都执行三个具体步骤 执行了12步 O(12)=>O(1) O(n) log 2 N = log c N / log c N (相当于两个对数进行了 ...
- Express 初步使用
Express express 是 node 中最流行的框架之一. 1. 起步 安装: npm install express --save hello world const express = r ...
- nyoj256-C小加之级数求和
C小加 之 级数求和 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 最近,C小加 又遇到难题了,正寻求你的帮助. 已知:Sn= 1+1/2+1/3+-+1/n. 显然对 ...