flexbox - 悬停不适用于 flex-item答案

【问题标题】：flexbox - hover not working for flex-itemflexbox - 悬停不适用于 flex-item
【发布时间】：2026-01-12 12:35:01
【问题描述】：

我正在使用flexbox 来控制按钮的 UI。

当我将Add new 部分悬停时，高度根本没有被完全覆盖。

但是当我将展开箭头悬停时它可以工作

在 App.js 中

  return (
    <div className="App">
      <div className="media">
        <div className="media__bar media__header">
          <div className="media__header__add">
            <div className="media__header__add__new">
              <AddPhotoAlternateIcon fontSize="small" />
              <span>Add new</span>
            </div>
            <button>
              <ExpandMoreIcon style={{ color: "white" }} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );

css

.App {
  font-family: sans-serif;
  text-align: center;
}

.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.media .media__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 1rem;
  padding-left: 1rem;
}

.media .media__header .media__header__add {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: white;
  background-color: #c9356e;
  padding: 0.1rem;
}

.media .media__header .media__header__add span {
  font-size: 0.9rem;
}

.media .media__header .media__header__add button {
  background-color: transparent;
  border: none;
}

.media .media__header .media__header__add button:hover {
  background-color: #ab235a;
}

.media .media__header .media__header__add .media__header__add__new {
  padding-left: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.media .media__header .media__header__add .media__header__add__new:hover {
  cursor: pointer;
  background-color: #ab235a;
}

代码沙盒：
https://codesandbox.io/s/divine-pond-6zy5s?file=/src/styles.css

【问题讨论】：

这可能会有所帮助 - *.com/questions/32828249/…

标签： javascript html css reactjs flexbox

【解决方案1】：

这是因为您将鼠标悬停在单个子标签 (button and div.media__header__add__new)。

要让它工作，你必须像这样将鼠标悬停在父元素上。

.media .media__header .media__header__add:hover {
  cursor: pointer;
  background-color: #ab235a;
}

现在您可以移除悬停在：

.media .media__header .media__header__add .media__header__add__new:hover{}

和

.media .media__header .media__header__add button:hover {}

【讨论】：

【解决方案2】：

您需要将鼠标悬停在 .media__header__add 而不是 media__header__add__new 上才能达到您想要的效果。

.media .media__header .media__header__add .media__header__add__new:hover {
  cursor: pointer;
  background-color: #ab235a;
}

上面变成了这个，

.media .media__header .media__header__add:hover {
  cursor: pointer;
  background-color: #ab235a;
}

编辑：代码沙盒：https://codesandbox.io/s/romantic-fast-kjtfl

【讨论】：