QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 1617|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2021-10-21 12:25:09 | 显示全部楼层 |阅读模式
       图片高亮显示在页面中很常见,下面是用jquery实现图片高亮显示的效果,鼠标移动动某个图片上,则这个图片高亮显示。
8 @6 l" B  ~$ ?+ B* ~% c 1.jpg 4 v. b0 E6 z' U3 v0 O+ r( E
html代码部分! A9 |0 l  ]3 c' T2 t
<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代码部分
, }4 r# K0 T6 B) ^: s- H& V
<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代码部分" `! d& s1 w* j+ W$ L# F
<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-3-19 04:06

Powered by paopaomj X3.5 © 2016-2025 sitemap

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