div не изменит размер с помощью свойств CSS

Я пытаюсь добавить окружающий 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;
    }
}

reactjs css font-awesome
person Mr. Robot    schedule 27.01.2020    source источник
comment
Вам нужно добавить !important с высотой и шириной примерно так: width: 100px !important; высота: 100 пикселей !важно;   -  person Shahab Khan    schedule 27.01.2020
comment
Этот вопрос не требует важного. К тому же хороший дизайн в большинстве случаев может обойтись без важного.   -  person Evgenii Klepilin    schedule 27.01.2020
comment
Спасибо, !important не получилось   -  person Mr. Robot    schedule 27.01.2020
comment
вам нужно указать прямое дополнение, а не ширину и высоту...   -  person Shahab Khan    schedule 27.01.2020
comment
Это САСС? Вам нужно пометить его как таковой, потому что это недопустимый CSS.   -  person Rob    schedule 27.01.2020
comment
Хм, как так? Я взял это отсюда: edwardbeazer.com /как-добавлять-события-наведения-к-любому-реагирующему-компоненту   -  person Mr. Robot    schedule 27.01.2020
comment
Вы не можете вкладывать свойства в CSS. Если это не SASS, то это должен быть React.   -  person Rob    schedule 27.01.2020

Ответы (3)


arrow_upward
1
arrow_downward

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

.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;
    }
}
person crrmacarse    schedule 27.01.2020
comment
Спасибо, но это не увеличило размер фона. - person Mr. Robot; 27.01.2020
comment
вам также нужно добавить фоновый цвет к его родителю. проверьте мой обновленный ответ - person crrmacarse; 27.01.2020
comment
Спасибо, я обновил свой вопрос после реализации вашего решения. - person Mr. Robot; 27.01.2020

arrow_upward
1
arrow_downward

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

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

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

person Muskett    schedule 27.01.2020

arrow_upward
0
arrow_downward

Вам нужно добавить !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;
        }
    }

person Shahab Khan    schedule 27.01.2020