<!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. php收集表单数据-$GET和$POST的区别

    学习笔记: $_GET 变量 预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值. 从带有 GET 方法的表单发送的信息(例如:http://www.r ...

  2. excel怎么制作实线虚线混排的折线图

    excel怎么制作实线虚线混排的折线图 excel怎么制作实线虚线混排的折线图?excel表格中想要设计的图表是实线的,想要让图标同时显示虚线和实线,该怎么操? 通常在在使用折线图描述数据的趋势时,前 ...

  3. java 将word转为PDF (100%与word软件转换一样)

    jdk环境:jdk_8.0.1310.11_64    (64位) 1.引入pom文件 <!-- word转pdf(依赖windows本地的wps) --> <dependency& ...

  4. phpExcel 操作示例

    片段 1 片段 2 phpExcel 操作示例 <?php //写excel //Include class require_once('Classes/PHPExcel.php'); requ ...

  5. Codeforces 293B Distinct Paths DFS+剪枝+状压

    目录 题面 题目链接 题意翻译 输入输出样例 输入样例#1 输出样例#1 输入样例#2 输出样例#2 输入样例#3 输出样例#3 输入样例#4 输出样例#4 说明 思路 AC代码 总结 题面 题目链接 ...

  6. PHP验证码文件类

    转自:http://www.blhere.com/1165.html 12345678910111213141516171819202122232425262728293031323334353637 ...

  7. SAS信用评分之番外篇异常值的识别

    SAS信用评分之番外篇异常值的识别 今天想分享给大家的是我早期建模的时候一个识别异常值的办法,也许你在"信用风险评分卡研究"看过,但是代码只能识别一个变量,我将这个代码作了改良,但 ...

  8. poj3261 后缀数组求重复k次可重叠的子串的最长长度

    Milk Patterns Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 13669   Accepted: 6041 Ca ...

  9. python 六种典型的异常

  10. C++四:继承与派生

    C++四:继承与派生 一.概念    继承就是从先辈处得到属性和行为特性.类的继承,是指新的类从已有类的那里得到的特性.类的派生,就是指已有类产生新类的过程. 二.应用 定义为 class 派生类名: ...