Блог

Главная - Вопросы по программированию - Изменение цвета текста и фона ссылок при наведении курсора мыши

Изменение цвета текста и фона ссылок при наведении курсора мыши

#css #colors #hover

#css #Цвет #наведите

Вопрос:

Я хочу изменить цвет текста и цвет фона ссылок при наведении курсора мыши? Цвет фона меняется, но текст не меняет цвет

CSS:

 .choice-container { 
    display: flex; 
    margin-bottom: 0.5rem; 
    width: 100%; 
    font-size: 1.8rem; 
    color: rgb(255, 238, 0); 
    background-color: rgb(0, 0, 0); 
    border: 0.1rem solid rgb(255, 238, 0); 
}

.choice-container:hover { 
    cursor: pointer; 
    transform: translateY(-0.1rem);
    transition: transform 150ms; 
    color: rgb(0, 0, 0) !important; 
    background-color: rgb(255, 238, 0); 
    border: 0.1rem solid rgb(255, 255, 255); 
    box-shadow: 0 0.4rem 2.4rem 0 rgb(255, 238, 0);
}

Комментарии:

1. попробуйте добавить !важно после цвета

2. не слушайте это. !important это не решение. Это метод решения проблемы без фактического устранения проблемы. Его следует использовать только для создания шаблонов, если у вас есть стандартный шаблон дизайна и вы хотите его перезаписать.

3. запустите свой код без !важно, и он работает безупречно. Вы уже очистили свой кеш? опечатки в вашем HTML-коде? Предоставленный вами CSS не содержит ошибок. Это работает нормально, даже не нужно использовать !важно

Ответ №1:

Кажется, он работает без каких-либо ошибок.

 .choice-container {
  display: flex;
  margin-bottom: 0.5rem;
  width: 100%;
  font-size: 1.8rem;
  color: rgb(255, 238, 0);
  background-color: rgb(0, 0, 0);
  border: 0.1rem solid rgb(255, 238, 0);
}

.choice-container:hover {
  cursor: pointer;
  transform: translateY(-0.1rem);
  transition: transform 150ms;
  color: rgb(0, 0, 0) !important;
  background-color: rgb(255, 238, 0);
  border: 0.1rem solid rgb(255, 255, 255);
  box-shadow: 0 0.4rem 2.4rem 0 rgb(255, 238, 0);
} 
 <a href = "https://www.google.com" class="choice-container">Google</a>

Здесь это в jsfiddle: https://jsfiddle.net/kt1wzv08 /

При отсутствии наведения курсора мыши:

При наведении курсора мыши: