<!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. nested exception is org.hibernate.MappingException解决方案

    1.可能是因为映射文件( Order.hbm.xm)配置的class路径出错 <hibernate-mapping> <class name="com.web.bean.O ...

  2. JavaScript--漏写var却还能使用标签

    一个漏写var带来的问题: 这个是不标准的写法!不建议使用 但是效果还是出来了,为什么呢? 原因: https://zhidao.baidu.com/question/1637589020484843 ...

  3. 【转载】【python】python练手项目

    入门篇 1.Python - Python 图片转字符画 50 行 Python 代码完成图片转字符画小工具. &lt;img src="https://pic3.zhimg.com ...

  4. 二.python数据结构的性能分析

    目录: 1.引言 2.列表 3.字典 一.引言 - 现在大家对 大O 算法和不同函数之间的差异有了了解.本节的目标是告诉你 Python 列表和字典操作的 大O 性能.然后我们将做一些基于时间的实验来 ...

  5. RedHat6.2离线安装vncserver

    准备安装包 tigervnc-server-1.1.0-5.el6_4.1.x86_64.rpm pixman-0.32.8-1.el6.x86_64.rpm pixman-devel-0.32.8- ...

  6. idea建立maven聚合项目 标签： mavenidea 2017-01-08 15:33 2477人阅读 评论(30)

    上篇文章写了如何用idea建立maven项目,idea建立maven聚合项目我感觉不如eclipse方便,不过并不是没有办法,下面写一下这个小教程. 建立maven project 建立maven p ...

  7. HDU-1024_Max Sum Plus Plus

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) P ...

  8. Nuxt.js打造旅游网站第2篇_首页开发

    页面效果: 1.初始化默认布局 nuxtjs提供了一个公共布局组件layouts/default.vue,该布局组件默认作用于所有页面,所以我们可以在这里加上一些公共样式,在下一小结中还会导入公共组件 ...

  9. TextView.setTextColor(int); 括号里那个颜色int值的理解

    原本以为是R.id里的东西,后来发现不是 http://dianhua1990627.blog.163.com/blog/static/2755558820132262150387/

  10. 数组工具类 Day07

    package com.sxt.arraytest2; /* * 数组的工具类 */ import java.util.Arrays; public class TestArrays { public ...