<!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. Hdu 2513 区间DP

    Cake slicing Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  2. python第二天 : 计算机基础(二)

    目录 1.什么是编程 2.操作系统有什么用? 3.计算机由哪三大部分组成? 4.简述操作系统和应用程序的启动流程? 5.编程语言的分类有哪些?并评估各个分类的优缺点. 1).机器语言 2).汇编语言 ...

  3. 详细介绍Java中的堆、栈和常量池

    下面主要介绍JAVA中的堆.栈和常量池: 1.寄存器 最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈 存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在 ...

  4. Permutations II 去掉重复的全排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  5. 视觉暂留-Info:这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝!

    ylbtech-视觉暂留-Info:这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝! 1.返回顶部 1. 这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝! 原创|发布:2018-05-28 19: ...

  6. Data Lake Analytics中OSS LOCATION的使用说明

    前言 Data Lake Analytic(后文简称 DLA)可以帮助用户通过标准的SQL语句直接对存储在OSS.TableStore上的数据进行查询分析. 在查询前,用户需要根据数据文件的格式和内容 ...

  7. 微服务开源生态报告 No.2

    通常,我们都会通过在 GitHub 上订阅邮件列表,来了解社区动态.这一次,我们联合以上各开源项目的负责人,发布「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源 ...

  8. 使用 Javascript 将二进制字符串转成数字

    使用 Javascript 将二进制字符串转成数字 Javascript 转成 数学太简单了. 原来 parseInt 还有这样的用法. function binaryAgent(str) { str ...

  9. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  10. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...