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 对象): 注:此规定并 ...
随机推荐
- Only variable references should be returned by reference
搭建完Lepus监控系统后,界面提示错误:A PHP Error was encountered Severity: Notice Message: Only variable references ...
- vue项目布局
1.底部有分类布局 类似这种底部有分类的,点击四个tap分别道不同的页面这样的,每个页面都是一个路由,把底部作为一个组件在每一个页面中引入就行.组件就是公用的,能公用的就写成组件.如下 { path: ...
- BZOJ 1355: [Baltic2009]Radio Transmission AC自动机/KMP
被一个KMP傻题搞蒙圈了,此题AC自动机空间超限,只能用KMP写(我只会AC自动机QAQ)...... AC自动机 Code: // luogu-judger-enable-o2 #include & ...
- noip 2010 引水入城 贪心 + 搜索
不难分析出如果有解则每个蓄水厂所能覆盖到的干旱城市一定是连续的.否则,中间那些没被覆盖的部分永远都不能被覆盖到. 当然,每个蓄水厂所覆盖的城市有可能不连续,不过既然有解,则一定都是连续的.我们可以开一 ...
- C++基础 (4) 第四天 this指针 全局函数和成员函数 友元 操作符重载
1static强化练习-仓库进货和出货 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; c ...
- github配置单个及多个sshkey的操作方法
一.配置单个sshkey 配置SSHKey命令操作: git --version //检验git是否装好了 cd / cd ~/.ssh //到master目录下 ll //展示所有文件 ssh-ke ...
- 【codeforces 799C】Fountains
[题目链接]:http://codeforces.com/contest/799/problem/C [题意] 你有两种不同的货币; 余额分别为c和d 然后有n种商品; 每种商品只能由两种货币中的某一 ...
- @Autowired @Resource @Inject 自动注入
一.@AutoWired ( spring 的注解 )自动注入 /** * @Autowired: * 默认按照 Student 类型去容器中找对应的组件:applicationContext.get ...
- BeanPostProcessor bean 的后置处理器
一. 自定 bean 的后置处理器 MyBeanPostProcessor 类.当你在初始化容器中的 bean 之前和之后,都会调用该处理器中的方法 @Component //将该后后置处理器加入到容 ...
- CAD教程-AL对其命令
AL可以实现不规则的对其功能 1.第一步按下AL,按下Enter 2.选择第一个源点 3.选择第一个目标点 4.选择第二个源点 5.选择第二个目标点 6.按下Enter,完成移位