jQuery实现鼠标经过时出现隐藏层文字链接的方法


Posted in Javascript onOctober 12, 2015

本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法。分享给大家供大家参考。具体如下:

这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现。

运行效果截图如下:

jQuery实现鼠标经过时出现隐藏层文字链接的方法

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ显示隐藏层,鼠标经过时出现文字链接</title>
<style>.list span{display:none}</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $(".list li").hover(function(){
  $(this).find("span").show();
 },function(){
  $(this).find("span").hide();
 });
});
</script>
</head>
<body>
<ul class="list">
 <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
</ul>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
vue跨域解决方法
Oct 15 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
Javascript函数式编程语言
Oct 11 #Javascript
Javascript函数式编程简单介绍
Oct 11 #Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 #Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python定时执行指定函数的方法
2015/05/27 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
家长会演讲稿范文
2014/01/10 职场文书
班长竞选演讲稿
2014/04/24 职场文书
办公用房租赁协议书
2014/11/29 职场文书
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers