QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 1509|回复: 0

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

[复制链接]

等级头衔

积分成就    金币 : 2851
   泡泡 : 1516
   精华 : 6
   在线时间 : 1305 小时
   最后登录 : 2024-12-7

丰功伟绩

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

联系方式
发表于 2021-10-21 12:25:09 | 显示全部楼层 |阅读模式
       图片高亮显示在页面中很常见,下面是用jquery实现图片高亮显示的效果,鼠标移动动某个图片上,则这个图片高亮显示。" S6 `2 U: t2 V7 v4 ^/ O$ g# Y
1.jpg
& a' [, Q; Z* l) r: {+ B1 F5 S: Ihtml代码部分, e& R' a$ P  D8 g
<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代码部分0 O5 P$ y: [$ `
<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代码部分) A8 q" b4 t5 `. T1 o
<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, 2024-12-7 03:37

Powered by paopaomj X3.5 © 2016-2025 sitemap

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