css - div 不会随 CSS 属性改变大小

Question

我正在尝试使用纯 CSS 将周围的 div 添加到 React 中的图标，但由于某种原因，div 不会响应大小。

悬停时，背景颜色会发生变化，但由于某种原因，我无法使用 CSS 增加 div 的大小 - 它只是保持与它所包裹的图标相同的尺寸。

这是我的 JSX：

        <div
          onClick={handleShowLegend}
          onKeyDown={handleShowLegend}
          role="button"
          tabIndex={0}
          className="showLegendButton"
        >
          <FontAwesomeIcon
            icon={showLegend ? faChevronUp : faChevronDown}
            size="2x"
          />
        </div>

这是我的CSS：

.showLegendButton {
    width: 100px; // this does not work
    height: 100px; // this does not work
    padding-right: 28px;
    :hover {
        background-color: #ff0000;
        cursor: pointer;
    }
}

更新

这是在悬停时实现第一个答案的样子。我只想看到比悬停图标更大的背景颜色，而不是一直。

.showLegendButton {
    padding: 50px;
    background-color: #ff7979;
    :hover {
        background-color: #e0e0e0;
        cursor: pointer;
    }
}

标签： cssreactjsfont-awesome

Answer 1

您没有在 CSS 中声明要更改悬停时的尺寸属性，而只是更改颜色和光标。像这样将您的高度和宽度声明移动到伪选择器中。

.showLegendButton {
    padding-right: 28px;
    :hover {
        background-color: #ff0000;
        cursor: pointer;
        width: 100px; 
        height: 100px;
    }
}

它应该给你你正在寻找的结果，（如果我从你的问题中正确理解你希望彩色背景在悬停时增加大小）。