div не изменит размер с CSS свойствами

Question

Я пытаюсь добавить окружающий div к значку в React, используя обычный CSS, но по какой-то причине div не будет реагировать на размер.

При наведении курсора цвет фона меняется, но я не могу по какой-то причине увеличьте размер div на CSS - он просто останется с теми же размерами, что и обтекаемый значок.

Вот мой 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;
    }
}

Еще раз спасибо!

Answer 1

Вы не заявляете в своем css, что хотите изменить свойства размера при наведении курсора, только цвет и курсор. Переместите ваши объявления высоты и ширины в псевдоселектор, как это.

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

и это должно дать вам результат, который вы ищете (если я правильно понимаю из вашего вопроса, что вы хотите, чтобы цветной фон увеличился в размерах при наведении).

Answer 2

Вы можете использовать отступы, чтобы получить эффект объемного звучания вместо ширины и высоты

.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;
    }
}

Answer 3

Вы должны добавить! Важно с высотой и шириной, как показано ниже: ИЛИ вам нужно дать прямое заполнение, а не фиксированную высоту и ширину: Спасибо

.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;
        }
    }