jQuery实现鼠标经过时出现隐藏层文字链接的方法_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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 鼠标经过
, 文字链接
隐藏层
jquery实现鼠标悬浮窗、jquery实现显示隐藏、jquery鼠标离开隐藏、jquery实现div隐藏、jquery实现鼠标拖拽,以便于您获取更多的相关知识。

时间: 2024-10-26 21:13:01

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

jquery实现鼠标拖拽滑动效果来选择数字的方法_jquery

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

鼠标滑过事件-鼠标滑过显示隐藏层,做出来了可以,其他页面没作用????为什么????

问题描述 鼠标滑过显示隐藏层,做出来了可以,其他页面没作用????为什么???? 在下图手机APP上做了一个鼠标滑过就显示一个层(可操作得框),可是为什么网站的部分页面就是没效果(网站的个人中心,和购物付款时),求解???? 解决方案 手机app哪有鼠标,点击弹出 解决方案二: 把HTML代码贴出来嘛 解决方案三: 在网站的个人中心,和购物付款这两个页面时,与手机app相关的dom元素是不是发生了变化?

jQuery的鼠标悬停时放大图片的效果制作

效果如下图所示 我们先看完整的代码  代码如下 复制代码 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>基于jQuery的鼠标悬停时放大图片的效果制作</title> <style> * { margin:0; padding:0; } img { vertical-align:bottom; border:none; }

JQuery实现鼠标移动图片显示描述层的方法

  本文实例讲述了JQuery实现鼠标移动图片显示描述层的方法.分享给大家供大家参考.具体如下: 这里可结合 JQuery easing 的动画来配合使用. 主要代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 $(".item").hover( function() { //$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine")

css实现鼠标悬停时滑出层提示的方法

 本文实例讲述了css实现鼠标悬停时滑出层提示的方法.分享给大家供大家参考.具体分析如下: 这是一个简单的鼠标悬停提示特效,类似于alt标签,不过这一种是用纯CSS实现,扩展性好,而且在提示的层里可以加入图片或其它布局,这个要根据你的需要了.   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

JQuery实现鼠标移动图片显示描述层的方法_jquery

本文实例讲述了JQuery实现鼠标移动图片显示描述层的方法.分享给大家供大家参考.具体如下: 这里可结合 JQuery easing 的动画来配合使用. 主要代码如下: $(".item").hover( function() { //$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine"); $(this).children("div.title

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

jQuery当鼠标悬停时放大图片的效果实例

这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分: 先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcac

jQuery当鼠标悬停时放大图片的效果实例_jquery

这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach