QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 1800|回复: 0

[HTML/CSS/JS] jQuery实现鼠标移动到图片上高亮显示

[复制链接]

等级头衔

积分成就    金币 : 2857
   泡泡 : 1516
   精华 : 6
   在线时间 : 1319 小时
   最后登录 : 2025-5-14

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-10-21 12:25:09 | 显示全部楼层 |阅读模式
       图片高亮显示在页面中很常见,下面是用jquery实现图片高亮显示的效果,鼠标移动动某个图片上,则这个图片高亮显示。
! Z3 J! o. `6 {: }3 e/ v4 | 1.jpg
3 c; ~: Q! l* y" P& qhtml代码部分
9 i6 _$ q1 n8 A- ^: O, ^6 ^
<body>
 <div>
 /*添加图片*/
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
  <img src="img/6.jpg">
 </div>
</body>
CSS代码部分
- Q/ a+ y* m8 Q" H- U& e
<style>
 html{background:#000;}
 div{
  width:700px;
  height:410px;
  border:1px solid #ddd;
  margin:50px auto;
  padding:0 20px;
 }
 div img{
        margin: 10px 10px 0 20px;
    }
</style>
jQuery代码部分% z! x% O* f0 |
<script>
// 给大盒子添加hover事件
 $("div").hover(function(){
 //  给每个img添加hover事件
            $("img").hover(function(){
            // 给当前img添加动动画改变透明度
                $(this).stop(true).animate({opacity:1},100)
                $(this).siblings().stop(true).animate({opacity:.5})
            })
        })
        // 当鼠标移开大盒子时添加动画改变透明度
        $("div").mouseout(function(){
            $("img").animate({opacity:1},100)
        })
</script>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-6-8 11:52

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表