编程 Javascript

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

Posted in Javascript onOctober 12, 2015

本文实例讲述了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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js滚动条多种样式,推荐

Feb 05 Javascript

js查找父节点的简单方法

Jun 28 Javascript

神奇的7个jQuery 3D插件整理

Jan 06 Javascript

js实现仿阿里巴巴城市选择框效果实例

Jun 24 Javascript

谈谈AngularJs中的隐藏和显示

Dec 09 Javascript

探究JavaScript函数式编程的乐趣

Dec 14 Javascript

深入浅析JavaScript系列（13）：This? Yes,this!

Jan 05 Javascript

微信小程序 Audio API详解及实例代码

Sep 30 Javascript

利用express启动一个server服务的方法

Sep 17 Javascript

小程序实现带年月选取效果的日历

Jun 27 Javascript

LayUI switch 开关监听获取属性值、更改状态的方法

Sep 21 Javascript

vue中使用百度脑图kityminder-core二次开发的实现

Sep 26 Javascript

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