jquery 突出显示

  • D9_248137
    了解作者
  • 210.6KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-12 17:08
    上传日期
jquery 突出显示
02- 突出展示案例.rar
  • 02- 突出展示案例
  • images
  • 01.jpg
    56.1KB
  • 05.jpg
    38.1KB
  • 04.jpg
    52.3KB
  • 03.jpg
    55KB
  • 06.jpg
    54.2KB
  • 02.jpg
    53.3KB
  • index.html
    2.4KB
内容介绍
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } body { background: #000; } .wrap { margin: 100px auto 0; width: 630px; height: 394px; padding: 10px 0 0 10px; background: #000; overflow: hidden; border: 1px solid #fff; } .wrap li { float: left; margin: 0 10px 10px 0; } .wrap img { display: block; border: 0; } </style> <script src="../lib/jquery-1.12.3.js"></script> <script> $(function(){ /** * 变暗,其实改的是opacity属性的值,改成了0.4 * 步骤: * 1.获取所有的li,并且绑定mouseenter事件 * 2. 让当前的li的opacity为1,兄弟节点的opacity为0.4 * 3. 当离开了div的时候,让所有的li的opacity改成1 */ // 1. 给所有的li标签注册鼠标移入的事件 $('.wrap ul li').mouseenter(function(){ // 2. 当鼠标移入的li标签高亮显示 其余的要变暗一些 $(this).css('opacity',1).siblings().css('opacity',0.4) }) // 3. 当鼠标离开大盒子div的时候 要让所有的li标签都 恢复原状 $('.wrap').mouseleave(function(){ // 让所有的li标签恢复原状 // find是用来从父级中查找所有的后代标签 不管是儿子级还是孙子级都 会找到 $(this).find('li').css('opacity',1) }) }) </script> </head> <body> <div class="wrap"> <ul> <li><a href="#" rel='nofollow' onclick='return false;'></a></li> <li><a href="#" rel='nofollow' onclick='return false;'></a></li> <li><a href="#" rel='nofollow' onclick='return false;'></a></li> <li><a href="#" rel='nofollow' onclick='return false;'></a></li> <li><a href="#" rel='nofollow' onclick='return false;'></a></li> <li><a href="#" rel='nofollow' onclick='return false;'></a></li> </ul> </div> </body> </html>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询