突出显示

最新推荐文章于 2023-12-26 20:08:41 发布

纵有千般好

最新推荐文章于 2023-12-26 20:08:41 发布

阅读量90

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_48292956/article/details/116143687

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

这个demo主要运用的是排他思想
代码：

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>突出显示</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="images/01.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/02.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/03.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/04.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/05.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="images/06.jpg" alt="" /></a>
      </li>
    </ul>
  </div>
  <!-- 引入jq -->
  <script src="../jquery-1.12.4.min.js"></script>
  <script>
    // 入口函数
    $(function () {
      // 给所有的li注册鼠标移入事件
      $('.wrap li').mouseenter(function () {
        // 让鼠标移入的li亮度为1，其他li变暗
        $(this).css('opacity', 1).siblings().css('opacity', 0.3);
      });
      // 给这个大容器做鼠标移出事件，
      $('.wrap').mouseleave(function () {
        // 鼠标移出，所有li恢复原样
        $(this).find('li').css('opacity', 1);
      });
    });
  </script>
</body>

</html>

效果：
图多放点，鼠标移动速度快一点，有点像老虎机的感觉哦
在这里插入图片描述

纵有千般好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
突出显示

这个demo主要运用的是排他思想代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>突出显示</title> <style type="text/css"&gt
复制链接

扫一扫