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日

悬赏问题

  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]
  • ¥15 uni.onBluetoothDeviceFound熄屏不运行
  • ¥15 求PHDA糖尿病并发症数据集,有偿