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

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

赞 (0)

相关推荐

  • JQuery获取鼠标进入和离开容器的方向

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标从哪个方向进入和离开容器</title> <script src="js/jquery-3.

  • jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

    本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q

  • 使用jQuery或者原生js实现鼠标滚动加载页面新数据

    相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • jQuery实现鼠标经过购物车出现下拉框代码(推荐)

    这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- 购物车 start --> <div class="shopping" id="shopping-box"> <a href="" id="shoptext"><i class="i

  • jquery实现鼠标悬浮停止轮播特效

    jquery实现鼠标悬浮停止轮播特效

    本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&

  • jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3

  • jquery实现图片列表鼠标移入微动

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti

  • jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

    jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】

    本文实例讲述了jQuery实现鼠标选中文字后弹出提示窗口效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-

  • jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c

随机推荐