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 对象): 注:此规定并 ...
随机推荐
- go结构,结构嵌套,接口,指针的测试和结论
package main import ( "fmt" ) //T是M1接受者,不是实现M2接受者 //*T是M1接受者,也是M2的接受者 //所以T对象不可以赋值给接口对象.*T ...
- VS2012 +PTVS配置
使用PTVS可以在Vs中使用Python,可以作为一个小TIps,总体来说还是不太合算,有多少价值呢!? 可以使用Python,可以直接构建Python工程.... 我下载的是 2.0beta版本: ...
- Python Tutorial笔记
Python Tutorial笔记 Python入门指南 中文版及官方英文链接: Python入门指南 (3.5.2) http://www.pythondoc.com/pythontutorial3 ...
- mvc cshtml 字符串操作
@using System.Text; @{ ; string str=""; StringBuilder sb = new StringBuilder(); } @foreach ...
- 莫烦大大TensorFlow学习笔记(9)----可视化
一.Matplotlib[结果可视化] #import os #os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' import tensorflow as tf i ...
- kernel相关前沿技术了解
Intel MPX https://en.wikipedia.org/wiki/Intel_MPX SPDK http://aidaiz.com/spdk/ TCMalloc http://goog- ...
- jQuery.extend()的合并对象功能
jQuery.extend( [ deep ], target, object1, [ objectN ] )合并对象到第一个对象 //deep为boolean类型,其它参数为object类型 var ...
- 训练1-D
把一个字符三角形掏空,就能节省材料成本,减轻重量,但关键是为了追求另一种视觉效果.在设计的过程中,需要给出各种花纹的材料和大小尺寸的三角形样板,通过电脑临时做出来,以便看看效果. Input 每行包含 ...
- maven的依赖冲突时的原则
1.如图: 假设上图中的项目B引入了一个junit.jar架包是3.0的版本 项目D引入了一个junit.jar架包是4.0的版本,那么项目X引用的将会是4.0的版本 2.pom.xml排到最前面的架 ...
- node+express框架中连接使用mysql经验总结
最近在学习node.js,做了一个练手项目,使用node.js+express框架,配合mysql数据库和前端vue框架开发一个多人文档编辑系统. koa,express,node 通用方法连接MyS ...