应用 react css hover 时布局有点损坏答案

【问题标题】：The layout is a bit broken when react css hover is applied应用 react css hover 时布局有点损坏
【发布时间】：2021-09-08 02:44:29
【问题描述】：

当我将鼠标悬停在 box1 时，我想显示一个边框。
当我悬停时，会显示边框，但一会儿会显示黑色边框。
另外，当我悬停时，布局会移到底部。
如果有人知道如何解决这个问题，请告诉我。

codesandbox

import "./styles.css";
import styled from "styled-components";

const Box = styled.div`
  padding: 9px 18px;
  cursor: pointer;
  display: inline-block;
  color: #222426;
  &:hover {
    border: solid #e2e6ea 1px;
    transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
  }
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    color: #222426;
  }
`;

const App = () => {
  return (
    <>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
      <Box>
        <span>box1</span>
      </Box>
      <div>
        <span>aaaaaaa</span>
      </div>
      <div style={{ width: "full", height: "100px", background: "red" }}></div>
    </>
  );
};

export default App;

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

在CSS中，你可以设置box-sizing: border-box; 然后设置跨度的高度，然后它就不会移到底部。另一种方法是制作白色边框，并在悬停时更改其颜色。

【讨论】：

【解决方案2】：

我发现你有“过渡：所有 0.2s 三次贝塞尔曲线（0.08, 0.52, 0.52, 1）；”这实际上会导致黑色边框闪烁一秒钟。如果删除它，黑色边框将消失。但是，我不确定您要在这里达到什么效果。
如果在 div 内添加相同背景颜色和相同粗细的边框，即边框：solid #fff 1px; div 不会再向下推其他组件了。

【讨论】：