jQuery实现鼠标经过时出现隐藏层文字链接的方法
更新时间：2015年10月12日 09:49:45 作者：企鹅
这篇文章主要介绍了jQuery实现鼠标经过时出现隐藏层文字链接的方法,涉及jQuery鼠标hover事件的响应及页面元素的动态处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法。分享给大家供大家参考。具体如下：
这里演示Jquery显示隐藏层的方法，鼠标经过时出现文字链接，模拟评分效果，这里没有加动作，仅显示了前台效果的实现。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/
具体代码如下：
<!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程序设计有所帮助。
相关文章
这篇文章主要介绍了Laravel admin实现消息提醒、播放音频功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
这篇文章主要介绍了jQuery使用之设置元素样式用法,实例分析了jQuery如何设置页面的样式风格,包括添加、删除、动态切换等的使用技巧,需要的朋友可以参考下2015-01-01
jquery的Theme和Theme Switcher使用小结
jquery的Theme和Theme Switcher使用总结，学习jquery Theme的朋友可以参考下。2010-09-09
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，本文使用jquery来实现这种效果，需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jquery easyui combox一些实用的小方法，有需要的朋友可以参考一下2013-12-12
如何使用jQuery Draggable和Droppable实现拖拽功能
本篇文章是对使用jQuery Draggable和Droppable实现拖拽功能的方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
这篇文章主要介绍了jQuery中的类名选择器（.class）用法,简单介绍了jQuery类名选择器的概念、原理并结合实例形式分析了类选择器的简单使用方法,需要的朋友可以参考下2018-05-05
IE下支持文本框和密码框placeholder效果的JQuery插件分享
这篇文章主要介绍了IE下支持文本框和密码框placeholder效果的JQuery插件分享,本文给出插件源码和使用示例,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jQuery菜单实例(全选,反选,取消)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
今天发现在使用jquery ajax.post提交数据时会发现数据在ff正常，但在chrome与ie浏览器中post过去的数据全部是乱码2013-11-11
最新评论