鼠标移入图片高亮，其余颜色变暗

效果如下
主要的布局代码如下：
1、设置一个大的盒子【wrap】，通过css样式将盒子居中显示
2、给li标签设置一个浮动排成一排显示
3、大盒子的宽度设置630，二每一张图片的大小是200，所以每行只能显示三个，多出来的就会往下面掉，通过设置大盒子的高度394，每张图片的高度是186再加上每一个li标签的外边距0 10 px 10px 0

<div class="wrap"><ul><li><a href="#"><img src="data:images/01.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/02.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/03.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/04.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/05.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/06.jpg" alt="" /></a></li></ul></div>

css样式代码如下

<style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block; border: 0;}</style>

Jq代码的实现原理：
1、先引入必须的jq文件
2、用到jq里面的鼠标移入移除事件【hover】
3、【hover】一个用两个回调函数，一个是鼠标移入要执行的，另一个是鼠标移出时要执行的
4、还需要用到三个jq里面的方法【siblings】当前对象的兄弟元素，【stop()】停止所有在指定元素上正在运行的动画。【fadeTo】把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

<script src="jquery.min.js"></script><script>$(function() {//鼠标进入的时候,其他的li标签透明度：0.5$(".wrap li").hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {// 鼠标离开，其他li 透明度改为 1$(this).siblings().stop().fadeTo(400, 1);})});</script>

通过上面的四个jq内置方法就可以实现这一简单的功能
解析：
当鼠标移入li标签的图片时，他的兄弟元素的背景透明度变到0.5，当鼠标移开时他的透明度又重新变回1（100%）
Stop()是停止动画，防止我们快速移入移除鼠标出现的动画还一个一个的执行

鼠标移入图片高亮，其余颜色变暗相关推荐

Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
CSS仿艺龙首页鼠标移入图片放大
CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好...... <!DOCTYPE html> <html lang="en"> <head> ...
css3实现鼠标移入图片变色
css3实现鼠标移入图片变色方法一:准备两张图片,直接更改hover后的背景图片.这种方法简单粗暴,我就不过多赘述了. 方法二,利用css3的filter滤镜.不知道filter的同学可以去W3c多 ...
关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
table 鼠标悬停时高亮背景颜色的修改 .el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrap ...
[CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover; object-fit 属性 objec ...
图片鼠标移入图片改变颜色、显示另外一张图片（2种方式）
1:实现鼠标移入之后图片更改为content中配置的路径 // 给图片增加class或id通过class或id给图片添加CSS样式 <img alt="" class=&q ...
html鼠标划到背景图显示文字,用css3实现鼠标移入图片后显示其他文字/图片的效果...
导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和 ...
【HTML】js控制代码，鼠标移入移除改变颜色
非常简单的一段小代码! 鼠标移入移除显示不同的颜色. 标题标题 <!DOCTYPE html> <html><head><meta charset=&quo ...
css实现鼠标移入图片，增加遮罩并在上方显示另一个图片
问题来源最近做web项目,前端表单添加用户头像时遇到的问题,就是鼠标移入添加图片的按钮要有相应的动态效果,具体要求如图 #鼠标未移入效果 #鼠标移入效果问题解决方式不想让js代码太过繁多,只用c ...

鼠标移入图片高亮，其余颜色变暗

鼠标移入图片高亮，其余颜色变暗

鼠标移入图片高亮，其余颜色变暗相关推荐

最新文章

热门文章