<!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. Ubuntu的网络共享

    实际场景 公司项目中遇到一个场景:Ubuntu的主机上装了个4G卡(USB模式),需要将这个4G网共享给一个AP,使得所有连接AP的移动设备都可以通过4G上外网 方法很简单: 1. 将4G网口之外的另 ...

  2. 从Docker容器内部，如何连接到本机的本地主机？

    原文 从Docker容器内部,如何连接到本机的本地主机? 编辑:如果您使用的是Docker-for-mac或Docker-for-Windows 18.03+,只需使用主机连接到您的mysql服务即可 ...

  3. epiinfo是美国CDC开发维护的流行病学数据录入和分析软件，在DOS时代占主流，随着Windows的普及用的人越来越少了，epiinfo重新开发Windows版本后，体积庞大且不好用。在数据录入方面已被EpiData取代，不过epiinfo的分析模块，比如地理信息系统某些情况下还是挺有用的。

    Manual: https://www.cdc.gov/epiinfo/support/userguide.html https://en.wikipedia.org/wiki/Epi_Info 教程 ...

  4. thrift python安装

    http://thrift.apache.org/download/ tar -zxvf thrift-0.11.0.tar.gz cd thrift-0.11.0 ./configure --pre ...

  5. 【JZOJ4934】【NOIP2017GDKOI模拟1.12】a

    helpless fucking 结论:如果一个数可以被对于a序列中每个数的最大公约数整除,那么它就是好的. Bitch Man 感性证明: 贪心地想,对于a序列中的任意两个数,它们的最大公约数可由这 ...

  6. mac进行acm(C/C++)编程

    在windows下我们往往使用CB(CodeBlocksks)进行acm的编程,不用建立工程,可以直接编译并运行,然后弹出黑框框,sublime也是这样,只要MinGW搞好就行 在ubuntu下我也常 ...

  7. Directx11教程(18) D3D11管线(7)

    原文:Directx11教程(18) D3D11管线(7) 光栅化阶段(RS)之后,将进入PS/OM阶段. 参考外文资料:http://fgiesen.wordpress.com/2011/07/01 ...

  8. Leetcode747.Largest Number At Least Twice of Others至少是其他数字两倍的最大数

    在一个给定的数组nums中,总是存在一个最大元素 . 查找数组中的最大元素是否至少是数组中每个其他数字的两倍. 如果是,则返回最大元素的索引,否则返回-1. 示例 1: 输入: nums = [3, ...

  9. element-ui select 二级联动

    在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同)  两个输入框代码 <el-form :inline="tru ...

  10. jupyter的简单操作

    jupyter简单使用 esc+ m 切换到标记模式 shift + enter 运行 a 向上新增代码块 b 向下新增代码块 dd 删除代码块 y python代码模式 file --- downl ...