【前端小组件实现】鼠标经过标签元素显示，另一个元素宽度改变。float，inline-block，block

原创

于 2025-03-18 14:46:33 发布 · 458 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

一、场景描述

Ol标签默认会有padding，需要去除。这里需要实现的是如下鼠标经过之后按钮组显示，并更改歌名元素的宽度。
技术点：
文字水平居中。
float元素与inline-block元素之间的区别。
在这里插入图片描述

二、案例分析加上一些相关知识点介绍。

2.1案例分析

首先我们需要肯定的是这个组件里面是一个li标签里面包含了三个标签元素，一个是序号标签，一个是歌名的标签，另一个是按钮组标签。首先我们需要知道div是块级元素，如果内部元素是块级元素就会导致分行。如下结果所示：
在这里插入图片描述
这个问题可以设置inline-block解决。

然后就是hover设置3显示，2缩短。
请添加图片描述
代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    li > div {
     
     
      display: inline-block;
      width: 30px;
      height: 20px;
      background-color: aqua;
      margin-left: 5px;
      margin-bottom: 5px;
    }
    li > div:nth-child(2) {
     
     
      width: 170px;
    }
    li > div:nth-child(3) {
     
     
      display: none