当前位置：首页 > article >正文

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

article 2025/3/21 13:50:47

一、场景描述

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;
    }
    li:hover div:nth-child(3) {     //子元素选择器  
      display: inline-block;
    }
    li:hover div:nth-child(2) {
      width: 82px;
    }
  </style>
  <body>
    <ol>
      <li>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </li>
    </ol>
  </body>
</html>

2.2 inline-block与float之间的区别

这两个布局的共同点是让块级元素布局到一行上。
inline-block会留在文档流中，而float会脱离文档流。脱离文档流会带来父元素高度塌陷的问题。

三、案例代码实现

import React, { memo, ReactNode } from "react";
import type { FunctionComponent } from "react";
import { RankItemWrapper } from "./styled";
import { Color } from "antd/es/color-picker";
 
interface Iprops {
  children?: ReactNode;
  title: string;
  coverUrl: string;
  songList?: any[];
}
 
const RankItem: FunctionComponent<Iprops> = (props) => {
  return (
    <RankItemWrapper>
      <div className="rank-top">
        <div className="title-content">
          <div className="rank-cover">
            <img src={props.coverUrl} alt="" />
            <a href="" className="rank-cover-mask sprite_cover"></a>
          </div>
        </div>
        <div className="text-content">
          <span className="rank-title">
            <b>{props.title}</b>
          </span>
          <div className="button-set">
            <a href="" className="play-button"></a>
            <a href="" className="collect-button"></a>
          </div>
        </div>
      </div>
      <ol className="song-list">
        {props.songList?.map((item, index) => {
          return (
            <li key={index}>
              <span
                className="serialNumber"
                style={
                  [0, 1, 2].includes(index)
                    ? { color: "red" }
                    : { color: "gray" }
                }
              >
                {index + 1}
              </span>
              <span className="song-item">{item.name}</span>
              <div className="buttongroup">
                <a href="" className="s-play-button"></a>
                <a href="" className="s-add sprite_icon2"></a>
                <a href="" className="s-collect-button sprite_02"></a>
              </div>
            </li>
          );
        })}
      </ol>
      <div className="more">
        <span>查看全部></span>
      </div>
    </RankItemWrapper>
  );
};
export default memo(RankItem);

import styled from "styled-components";
 
export const RankItemWrapper = styled.div`
  //width: 100%;
  .rank-top {
    padding: 20px 0 0 20px;
    height: 120px;
    div {
      display: inline-block;
    }
    .text-content {
      position: relative;
      top: -20px;
      margin-left: 10px;
      .rank-title {
        font-size: 15px;
      }
      .button-set {
        position: relative;
        bottom: -35px;
        left: -40px;
        .play-button {
          display: inline-block;
          background: url(${require("../../../../../../assets/img/sprite_02.png")})
            no-repeat 0 9999px;
          background-position: -267px -205px;
          width: 22px;
          height: 22px;
          &:hover {
            background-position: -267px -235px;
          }
        }
        .collect-button {
          margin-left: 10px;
          display: inline-block;
          background: url(${require("../../../../../../assets/img/sprite_02.png")})
            no-repeat 0 9999px;
          background-position: -300px -205px;
          width: 22px;
          height: 22px;
          &:hover {
            background-position: -300px -235px;
          }
        }
      }
    }
  }
  .buttongroup {
    float: right;
    width: 82px;
    display: none;
    margin-top: 7px;
    a {
      float: left;
      width: 17px;
      height: 17px;
      margin-right: 5px;
    }
    .s-play-button {
      background: url(${require("../../../../../../assets/img/sprite_02.png")})
        no-repeat 0 9999px;
      background-position: -267px -268px;
      &:hover {
        background-position: -267px -288px;
      }
    }
    .s-add {
      margin-top: 2px;
      background-position: 0px -700px;
      &:hover {
        background-position: -22px -700px;
      }
    }
    .s-collect-button {
      background-position: -297px -268px;
      &:hover {
        background-position: -297px -288px;
      }
    }
  }
  .song-list {
    list-style-type: decimal;
    margin-bottom: 0;
    padding: 0px;
    li {
      height: 32px;
      position: relative;
      list-style: none;
      span {
        float: left;
        width: 35px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .serialNumber {
        margin-left: 10px;
      }
      .song-item {
        width: 170px;
        font-size: 12px;
        left: 30px;
        float: left;
      }
      &:hover {
        cursor: pointer;
        .song-item {
          width: 84px;
        }
        .buttongroup {
          display: block;
        }
      }
    }
  }
  .more {
    position: relative;
    height: 32px;
    font-size: 12px;
    span {
      position: absolute;
      right: 20px;
      text-align: center;
      line-height: 32px;
    }
    &:hover span {
      cursor: pointer;
      text-decoration: underline;
    }
  }
  .rank-cover {
    position: relative;
    img {
      width: 80px;
      height: 80px;
    }
    .rank-cover-mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-position: -145px -57px;
    }
  }
`;

查看全文

原文地址:https://blog.csdn.net/weixin_43872912/article/details/146341156
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/592083.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！