<!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. webpack学习之——Output

    配置 output 选项可以控制 webpack 如何向硬盘写入编译文件.注意,即使可以存在多个入口起点,但只指定一个输出配置. 1. 用法 在 webpack 中配置 output 属性的最低要求是 ...

  2. httpserver实现简单的上下文

    package main import ( "net/http" "com.jtthink.net/myhttpserver/core" ) type MyHa ...

  3. solr dataimport中遇到的问题

    1.windows的tomcat是没有catalina.out的,可以通过修改start.bat和catalina.bat的方式让日志输出到catalina.out 2.按照网上搜到的资料配置好sol ...

  4. mac下的抓包工具Charles

    在mac下面,居然没有好的抓包工具,这让我十分纠结,毕竟不可能为了抓一个http包就跑到win下折腾.或许有人说tcpdump这么好的工具,你怎么不用.说实话,tcpdump太复杂了,我还没有细看,再 ...

  5. 2019-10-26-Inno-Setup-安装包脚本-Run-的-Flags-标记

    title author date CreateTime categories Inno Setup 安装包脚本 Run 的 Flags 标记 lindexi 2019-10-26 08:42:39 ...

  6. python 朴素算法

  7. 两篇论文之CNN中正交操作

    CNN的权值正交性和特征正交性,在一定程度上是和特征表达的差异性存在一定联系的. 下面两篇论文,一篇是在训练中对权值添加正交正则提高训练稳定性,一篇是对特征添加正交性的损失抑制过拟合. 第一篇:Ort ...

  8. parkingLot

    一个支付宝停车支付生活号前端页面 //index.html //自定义键盘 <!DOCTYPE html> <html> <head> <meta chars ...

  9. SpingMVC ModelAndView, Model,Control以及参数传递总结

    1.web.xml 配置: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <servlet>     <servlet-name>dispatcher& ...

  10. 洛谷1758 BZOJ1566 管道取珠题解

    题目链接 一道人类智慧的dp题 首先我们可以将∑ai^2转化为求取两次,两次一样的方案数 然后用f[i][j][k][l]表示第一个人在第一个串中取到i第二个串中取到j 第二个人在一个串中取到k第二个 ...