div 不会随 CSS 属性改变大小答案

【问题标题】：div will not change size with CSS propertiesdiv 不会随 CSS 属性改变大小
【发布时间】：2020-05-12 18:51:34
【问题描述】：

我正在尝试使用纯 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;
    }
}

【问题讨论】：

您需要添加 !important 的高度和宽度，就像这里一样： width: 100px !important;高度：100px !important;
这个问题不需要重要。除了好的设计在大多数情况下都不需要重要。
谢谢，!important 没用
你需要直接填充而不是宽度和高度......
那是 SASS 吗？您需要这样标记它，因为它是无效的 CSS。

标签： css reactjs font-awesome

【解决方案1】：

您可以使用填充来获得环绕效果而不是宽度和高度

.showLegendButton {
    padding: 20px; // this
    // padding-right: 28px; and use margin right in here instead of padding
    background-color: #colorhere  ; // what color do you like
    :hover {
        background-color: #ff0000;
        cursor: pointer;
    }
}

【讨论】：

谢谢，但这并没有使背景颜色的尺寸变大。
您还需要在其父级上添加背景颜色。检查我的更新答案
谢谢，我在实施您的解决方案后更新了我的问题。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您需要添加带有高度和宽度的 !important，如下所示：或者你需要给直接填充而不是固定的高度和宽度：谢谢

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

【讨论】：