编程 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 相关文章推荐

理清apply(),call()的区别和关系

Aug 14 Javascript

基于jquery自定义图片热区效果

Jul 21 Javascript

js动态生成指定行数的表格

Jul 11 Javascript

jQuery使用元素属性attr赋值详解

Feb 27 Javascript

JavaScript中setTimeout和setInterval函数的传参及调用

Mar 11 Javascript

通过Ajax使用FormData对象无刷新上传文件方法

Dec 08 Javascript

javascript实现简易计算器

Feb 01 Javascript

浅析Vue自定义组件的v-model

Nov 26 Javascript

使用Vue写一个datepicker的示例

Jan 27 Javascript

JS判断字符串是否为整数的方法--简单的正则判断

Jul 23 Javascript

一文看懂如何简单实现节流函数和防抖函数

Sep 05 Javascript

JS实现随机抽选获奖者

Nov 07 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