html - 在 React JS 中更改悬停时 gridTemplateColumns 宽度的最佳方法

Question

CSS Grid + React JS 假设我有一个非常基本的标题和侧边栏。在悬停侧边栏时，我希望侧边栏的宽度增加到 300 像素。我怎么能接近呢？

反应

<div className="app">
    <div className="header"></div>
    <div className="sidebar"></div>
</div>

CSS

.app {
  display: grid;
  grid-template-areas:
    "menu header";
  grid-template-columns: 100px 1fr;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: menu;
}

标签： htmlcssreactjs

Answer 1

您可以使用反应 onMouseEnter 和 onMouseLeave 属性

所以它会是这样的：

<div className="sidebar" 
  onMouseEnter={() => Make Width 300px}
  onMouseLeave={() => reset width}>
</div>