Не вся кнопка меняется при наведении курсора
Когда я наводил курсор на кнопку «Прочитать мою историю» в разделе «О нас» на моей домашней странице (https://howtogetrippedathome.com/), происходит что-то странное. При наведении указателя мыши на сторону кнопки, только кнопка в целом становится красной (но текст не становится белым). Когда я быстро наведен на текст в кнопке, текст и фон текста меняют цвет, а остальная часть кнопки чуть позже.
Я прочитал десятки постов и все перепробовал, но не могу заставить это работать. Я думаю, что это связано с элементом, на который я нацелен, но я не знаю, как это сделать правильно.
Я использую следующий код:
.so-widget-sow-button .ow-button-base :hover {
color: #fff;
background-color: #ff2828;
transition: 0.5s;
}
Помощь очень ценится, так как я уже немного потерялся.
Ответы 5
Это проблема
so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
Это отменяет цвет, который вы здесь указали.
.so-widget-sow-button .ow-button-base :hover {
color: #fff; <--- This one
background-color: #ff2828;
transition: .5s;
}
Сделайте его сильнее и / или удалите !important
это потому, что вы использовали цвет, важный для состояния привязки, пожалуйста, попробуйте ниже css, который решит ваши проблемы.
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a: hover> span {color: #fff}
Спасибо, что ответили. Когда я использую это решение, текст становится белым, но красным становится только квадрат непосредственно за текстом, а не вся кнопка. Когда я делаю это, он работает: .so-widget-sow-button .ow-button-base a: hover> span {color: #fff; цвет фона: # ff2828; переход: 0,5 с; } .so-widget-sow-button .ow-button-base a: hover {background-color: # ff2828; переход: 0,5 с; }
Извините, я пытаюсь показать это как код, но не могу заставить его работать.
Я нашел этот CSS в вашей таблице стилей:
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:visited,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:active,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
что, как вы можете видеть, заставляет цвет текста зависших ссылок внутри ow-button-base быть красным. Удаление строки a:hover решает конфликт; Я смог решить проблему, добавив этот css:
.ow-button-base a.ow-icon-placement-left:hover {
color:white !important;
}
1) Удалите цвета из span, потому что вам нужно, чтобы наведение было вашим тегом a, чтобы изменить
.so-widget-sow-button .ow-button-base :hover {
color: #fff; *--->remove this*
background-color: #ff2828;
transition: .3s; *---> change transition with 0.3s as it is on your a tag*
}
2) Добавьте новый курсор на теге a и измените цвет span.
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover span {
color: #fff;
transition: .3s;
}
3) Удалите !important из стиля тега привязки
Вы должны изменить цвет тега "a" с помощью выбора .ow-button-base: наведение
.ow-button-base:hover > a
{
color:#fff;
}
а также удалить
color:#ff2828 !important
Спасибо, что ответили. Я не могу найти первый скопированный вами код, его нет в моем дополнительном разделе CSS, поэтому я, к сожалению, не знаю, как удалить! Important.