<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    *{margin: 0;padding: 0;}

    body {background-color: black;}

  .box {

    margin: 100px auto;width: 630px;height: 394px;

    border: 2px solid white; background-color: black;

    padding: 10px;

  }

  ul {list-style: none;}

  ul li {

    float: left; padding: 5px;

  }

  </style>

</head>

<body>

<div class="box">

  <ul>

    <li><a href="#"><img src="data:images/01.jpg"></a></li>

    <li><a href="#"><img src="data:images/02.jpg"></a></li>

    <li><a href="#"><img src="data:images/03.jpg"></a></li>

    <li><a href="#"><img src="data:images/04.jpg"></a></li>

    <li><a href="#"><img src="data:images/05.jpg"></a></li>

    <li><a href="#"><img src="data:images/06.jpg"></a></li>

  </ul>

</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>

  $(function(){

    $("li").mouseenter(function(){

      $(this).css("opacity","1").siblings().css("opacity","0.4");

    });

    $("li").mouseleave(function(){

      $("li").css("opacity","1");

    });

  });

</script>

</body>

</html>

jq实现鼠标悬停高亮当前图片的更多相关文章

  1. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  2. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  3. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  4. jQuery的鼠标悬停时放大图片的效果

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  5. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  6. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  9. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

随机推荐

  1. Springboot 创建的maven获取resource资源下的文件的两种方式

    Springboot 创建的maven项目 打包后获取resource下的资源文件的两种方式: 资源目录: resources/config/wordFileXml/wordFileRecord.xm ...

  2. objectarx MFC 非模态对话框为当前焦点

    dialog.h afx_msg LRESULT OnAcadKeepFocus(WPARAM, LPARAM); dialog.cpp BEGIN_MESSAGE_MAP(CTextDialog, ...

  3. R语言与显著性检验学习笔记

    R语言与显著性检验学习笔记 一.何为显著性检验 显著性检验的思想十分的简单,就是认为小概率事件不可能发生.虽然概率论中我们一直强调小概率事件必然发生,但显著性检验还是相信了小概率事件在我做的这一次检验 ...

  4. 转：国内从事CV相关的企业

    http://blog.csdn.net/carson2005/article/details/7356225 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问 ...

  5. 使用 Apachetop 实时监测web服务器运行状况

    转自 http://42.96.169.71/blog/2013/01/26/shi-yong-apachetop-shi-shi-jian-ce-webfu-wu-qi-yun-xing-zhuan ...

  6. oracle-Mount

    执行nomount的所有工作,另外附加数据结构并与这些数据结构进行交互.这时,oracle从控制文件中获得信息. 可以执行的任务是: 执行数据库的完全恢复操作 重命名数据文件 改变数据库的归档状态. ...

  7. 洛谷 P3958 奶酪 并查集

    目录 题面 题目链接 题面 题目描述 输入输出格式 输入格式 输出格式: 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P3958 奶酪 题面 题目描述 现有一块大奶酪 ...

  8. 【风马一族_php】NO4_php基础知识

    原文来自:http://www.cnblogs.com/sows/p/6017018.html(博客园的)风马一族 侵犯版本,后果自负 回顾 运算符:算术运算符.逻辑运算符.比较运算符.位运算符.赋值 ...

  9. docker search

    命令:docker search [root@iZ943kh74qgZ ~]# docker search --help Usage: docker search [OPTIONS] TERM Sea ...

  10. php输入流简单小例子

    <form method="post" action="index.php/home/index/captchaTest"> <input n ...