分开两个跨度 CSS

Question

我有一个动画，当我将图标从右侧悬停时，我希望我的两个图标都使用它，删除和编辑，但我不知道应该使用哪种样式来分隔它们和单独更改颜色，而不会弄乱图标的大小或位置。

HTML：

import React, { useState } from "react";
import "./App.css";
import axios from "axios";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faPlus, faEdit } from "@fortawesome/free-solid-svg-icons";

function App() {
  return (
    <>
      <div className="backgound">
        <div className="wrapper">
          <header>Todo app MERN</header>
          <div className="inputField">
            <input type="text" placeholder="Add your new task"></input>
            <button>
              <FontAwesomeIcon icon={faPlus} />
            </button>
          </div>
          <ul className="todoList">
            <li>
              Do something
              <span>
                <FontAwesomeIcon icon={faTrash} />
                <FontAwesomeIcon icon={faEdit} />
              </span>
            </li>
            <li>
              Buy something
              <span>
                <FontAwesomeIcon icon={faTrash} />
                <FontAwesomeIcon icon={faEdit} />
              </span>
            </li>
            <li>
              Learn something
              <span>
                <FontAwesomeIcon icon={faTrash} />
                <FontAwesomeIcon icon={faEdit} />
              </span>
            </li>
          </ul>
          <div class="footer">
            <span> You have 3 pending tasks</span>
            <button>Clear</button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

我试图更改以将它们分开的类是 .todoList li 和 .todoList li span

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

::selection {
  color: #ffff;
  background: rgb(142, 73, 232);
}

body {
  width: 100%;
  height: 100vh;
  padding: 10px;
  background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}

.wrapper {
  background: #fff;
  max-width: 400px;
  width: 100%;
  margin: 120px auto;
  padding: 25px;
  border-radius: 5px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}

.wrapper header {
  font-size: 30px;
  font-weight: 600;
}

.wrapper .inputField {
  margin: 20px 0;
  width: 100%;
  display: flex;
  height: 45px;
}

.inputField input {
  width: 85%;
  height: 100%;
  outline: none;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 17px;
  padding-left: 15px;
  transition: all 0.3s ease;
}

.inputField input:focus {
  border-color: #8E49E8;
}

.inputField button {
  width: 50px;
  height: 100%;
  border: none;
  color: #fff;
  margin-left: 5px;
  font-size: 21px;
  outline: none;
  background: #8E49E8;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
}

.inputField button:hover,
.footer button:hover {
  background: #721ce3;
}

.inputField button.active {
  opacity: 1;
  pointer-events: auto;
}

.wrapper .todoList {
  max-height: 250px;
  overflow-y: auto;
}

.todoList li {
  list-style: none;
  height: 45px;
  line-height: 45px;
  position: relative;
  background: #f2f2f2;
  border-radius: 3px;
  margin-bottom: 8px;
  padding: 0 15px;
  cursor: default;
  overflow: hidden;
}

.todoList li span {
  position: absolute;
  right: -60px;
  color: #fff;
  width: 45px;
  text-align: center;
  background: #e74c3c;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.todoList li:hover span {
  right: 0px;
}



.wrapper .footer {
  display: flex;
  width: 100%;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}

.footer button {
  padding: 6px 10px;
  border-radius: 3px;
  border: none;
  outline: none;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  margin-left: 5px;
  background: #8E49E8;
  cursor: pointer;
  user-select: none;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
}

.footer button.active {
  opacity: 1;
  pointer-events: auto;
}

Answer 1

你忘记了一个原则：‌ 单一责任原则 所以最好的办法是组件只负责一件事。 所以让我们制作一个单独的组件，它根据 prop 获取条件渲染，然后对自己的行为负责。 然后你可以用一个元素包装它们并在 css 中使用 flexbox。

解决方案： 1-将“icon_container”类名添加到span

<span className="icon_container">
...
</span>

2-将“font_custom_class”类名添加到FontAwesome

<FontAwsome className="font_custom_class" .../>

3.更改css文件中的一些样式：

.todoList li {
  display : flex;
  flex-flow : row;
  justify-content : space-between;
  list-style: none;
  height: 45px;
  line-height: 45px;
  position: relative;
  background: #f2f2f2;
  border-radius: 3px;
  margin-bottom: 8px;
  cursor: default;
  overflow: hidden;
  padding-left: 15px !important;
}

.icon_container {
  width : 100px;
  background : red;
  display : flex;
  flex-flow : row nowrap;
  justify-content : center;
  align-items : center;
  transform : translateX(100px);
  transition : all 0.5s;
}
.icon_container > .font_custom_class {
    flex-grow: 1;
    text-align: center;
}

.todoList li:hover .icon_container {
  transform : translateX(0);
}