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 对象): 注:此规定并 ...
随机推荐
- location.reload() 和 location.replace()的区别和应用。
首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数:bForceGet, 可选参数, 默认为 false ...
- Validate US Telephone Numbers FreeCodeCamp
function telephoneCheck(str) { // 祝你好运 //var re = /^1? ?(\(\d{3}\)|\d{3})[ |-]?\d{3}[ |-]?\d{4}$/; / ...
- CentOS LiveCD、LiveDVD、BinDVD、netinstall、minimal版区别在哪里
BinDVD版——就是普通安装版,需安装到计算机硬盘才能用,bin一般都比较大,而且包含大量的常用软件,安装时无需再在线下载(大部分情况). minimal版——这个镜像文件用于安装一个非常基本的 C ...
- SQL SEVER (ROLLUP与CUBE，ROW_NUMBER())使用方法
1.建立测试专用数据: if object_id('TESTDB') is not null drop table TESTDB ), B INT) insert into TESTDB union ...
- .net 导入Excel
今天我在做导入Excel的时候遇到了一些问题,顺便说句其实我很少做这方面的!我的需求是导入EXCEL 验证数据正确性 并把数据显示到页面 如有错误信息则弹出来 那具体问题是什么呢? 导入Excel有2 ...
- JQuery课堂学习笔记
第1课 JQuery技术简介 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- POJ Pseudoprime numbers（ Miller-Rabin素数测试 ）
链接:传送门 题意:题目给出费马小定理:Fermat's theorem states that for any prime number p and for any integer a > 1 ...
- [tyvj-1071]LCIS 动态规划
LCIS模板 #include <cstdio> #include <cstring> #include <iostream> using namespace st ...
- Django模型Model的定义
概述 Django对各种数据库提供了很好的支持,Django为这些数据库提供了统一的调用API,可以根据不同的业务需求选择不同的数据库. 模型.属性.表.字段间的关系 一个模型类在数据库中对应一张表, ...
- Github+Jekyll 搭建个人网站详细教程
GitHub搭建个人网站,大家在网上一搜能搜到一大把的教程,但是大部分都讲的差不多,并不能满足自己想搭建的网站详细需求.我之前在搭建本站的时候也是查了较多资料,学习了下jekyll语法,参考了几个主题 ...