chang0116 2022-03-30 16:39 采纳率: 100%
浏览 28
已结题

jQuery鼠标移入案例求解

问题遇到的现象和发生背景

背景图：


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/966712926846167.png "#left")
问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
      /* 清除元素的margin和padding */
      *{
        margin: 0;
        padding: 0;
      }
      /* 设置最外层盒子的样式 */
      .wDiv{
        width: 709px;
        margin: 100px auto;
        background: url(img/bg.png) no-repeat;
        overflow: hidden;
        padding: 10px;
      }
      /* 取消列表的 默认样式 */
      .wDiv ul {
        list-style: none;
      }
      /* 设置列表的样式 */
      .wDiv li {
        position: relative;
        float: left;
        width: 69px;
        height: 69px;
        margin-right: 10px;
      }
      /* 设置初始状态 */
      .wDiv li.current {
        width: 224px;
      }
      .wDiv li.current .big {
        display: block;
      }
      .wDiv li.current .small {
        display: none;
      }
      /* 设置大方块样式 */
      .big {
        width: 224px;
        height: 69px;
        display: none;
        border-radius: 5px;
      }
      /* 设置小方块样式 */
      .small {
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
      }
      /* 设置大小方块的背景色*/
      .red1 {
        background: #FF3333;
      }
      .red2 {
        background: #CC0000;
      }
      .orange1 {
        background: #FFBB66;
      }
      .orange2 {
        background: #FF8800;
      }
      .yellow1 {
        background: #FFFFBB;
      }
      .yellow2 {
        background: #FFFF77;
      }
      .green1 {
        background: #99FF99;
      }
      .green2 {
        background: #66FF66;
      }
      .blue1 {
        background: #00BBFF;
      }
      .blue2 {
        background: #0066FF;
      }
      .pink1 {
        background: #FF88C2;
      }
      .pink2 {
        background: #FF44AA;
      }
      .purple1 {
        background: #E93EFF;
      }
      .purple2 {
        background: #CC00FF;
      }
    </style>
  </head>
  <body>
    <div class="wDiv">
      <ul>
        <li class="current">
          <div class="small red1"></div>
          <div class="big red2"></div>
        </li>
        <li>
          <div class="small orange1"></div>
          <div class="big orange2"></div>
        </li>
        <li>
          <div class="small yellow1"></div>
          <div class="big yellow2"></div>
        </li>
        <li>
          <div class="small green1"></div>
          <div class="big green2"></div>
        </li>
        <li>
          <div class="small blue1"></div>
          <div class="big blue2"></div>
        </li>
        <li>
          <div class="small pink1"></div>
          <div class="big pink2"></div>
        </li>
        <li>
          <div class="small purple1"></div>
          <div class="big purple2"></div>
        </li>
      </ul>
</div>


</body>
</html>
我想要达到的结果

img

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-03-30 17:06
    关注

    不知道是否是题主要的效果

    img

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 清除元素的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置最外层盒子的样式 */
        .wDiv {
            width: 709px;
            margin: 100px auto;
            background: url(img/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        /* 取消列表的 默认样式 */
            .wDiv ul {
                list-style: none;
            }
            /* 设置列表的样式 */
            .wDiv li {
                position: relative;
                float: left;
                width: 69px;
                height: 69px;
                margin-right: 10px;
            }
                /* 设置初始状态 */
                .wDiv li.current {
                    width: 224px;
                }

                    .wDiv li.current .big {
                        display: block;
                    }

                    .wDiv li.current .small {
                        display: none;
                    }
        /* 设置大方块样式 */
        .big {
            width: 224px;
            height: 69px;
            display: none;
            border-radius: 5px;
        }
        /* 设置小方块样式 */
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
        /* 设置大小方块的背景色*/
        .red1 {
            background: #FF3333;
        }

        .red2 {
            background: #CC0000;
        }

        .orange1 {
            background: #FFBB66;
        }

        .orange2 {
            background: #FF8800;
        }

        .yellow1 {
            background: #FFFFBB;
        }

        .yellow2 {
            background: #FFFF77;
        }

        .green1 {
            background: #99FF99;
        }

        .green2 {
            background: #66FF66;
        }

        .blue1 {
            background: #00BBFF;
        }

        .blue2 {
            background: #0066FF;
        }

        .pink1 {
            background: #FF88C2;
        }

        .pink2 {
            background: #FF44AA;
        }

        .purple1 {
            background: #E93EFF;
        }

        .purple2 {
            background: #CC00FF;
        }
    </style>
</head>
<body>
    <div class="wDiv">
        <ul>
            <li class="current">
                <div class="small red1"></div>
                <div class="big red2"></div>
            </li>
            <li>
                <div class="small orange1"></div>
                <div class="big orange2"></div>
            </li>
            <li>
                <div class="small yellow1"></div>
                <div class="big yellow2"></div>
            </li>
            <li>
                <div class="small green1"></div>
                <div class="big green2"></div>
            </li>
            <li>
                <div class="small blue1"></div>
                <div class="big blue2"></div>
            </li>
            <li>
                <div class="small pink1"></div>
                <div class="big pink2"></div>
            </li>
            <li>
                <div class="small purple1"></div>
                <div class="big purple2"></div>
            </li>
        </ul>
    </div>

    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var lis = $('.wDiv li').mouseenter(function () {
            lis.removeClass('current');
            $(this).addClass('current')
        })
    </script>
</body>
</html>

    img


    有其他问题可以继续交流~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 创建了问题 3月30日

悬赏问题

  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看