JS中使用jQuery实现高亮展示

最新推荐文章于 2023-03-31 15:01:18 发布

辰辰北

最新推荐文章于 2023-03-31 15:01:18 发布

阅读量259

点赞数

分类专栏： JavaScript HTML+CSS 文章标签： jquery javascript css

本文链接：https://blog.csdn.net/weixin_42943920/article/details/122574383

版权

JavaScript 同时被 2 个专栏收录

77 篇文章 1 订阅

订阅专栏

HTML+CSS

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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>
</head>
<body>
  <div class="wrap">
    <ul>
      <li><a href="#"><img src="../img/day78-jQueryImg/hightLight/01.jpg" alt=""></a></li>
      <li><a href="#"><img src="../img/day78-jQueryImg/hightLight/02.jpg" alt=""></a></li>
      <li><a href="#"><img src="../img/day78-jQueryImg/hightLight/03.jpg" alt=""></a></li>
      <li><a href="#"><img src="../img/day78-jQueryImg/hightLight/04.jpg" alt=""></a></li>
      <li><a href="#"><img src="../img/day78-jQueryImg/hightLight/05.jpg" alt=""></a></li>
      <li><a href="#"><img src="../img/day78-jQueryImg/hightLight/06.jpg" alt=""></a></li>
    </ul>
  </div>
</body>
</html>
<script src="../jQuery/jquery-3.6.0.js"></script>
  <script>
    //给所有li设置鼠标移入事件,
    $('li').mouseenter(function(){
      $(this).css('opacity',1).siblings().css('opacity',0.4)
    })
    // wrap的鼠标移出事件
    $('.wrap').mouseleave(() => {
      $('li').css('opacity',1)
    })
  </script>

辰辰北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中使用jQuery实现高亮展示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
复制链接

扫一扫