Кнопка Hover не работает правильно

Question

Я пытаюсь изменить свой текст на моей кнопке на белый, когда я навис над ним. Однако, когда я наводил курсор на мою кнопку, цвет текста не меняется на белый, а на серый, но фон меняется на правильный цвет, что подразумевает, что я нависаю над правильным элементом. Я проверил это, и кажется, что button:hover переопределяется существующим цветом наведения текста. Есть ли способ удалить текущий цвет серого цвета и использовать мой белый цвет?

Моего кода в

залежи

.button:hover { 
 
    color: white; 
 
    background-color: #1B43F9; 
 
}

<a class="button" href="#">Buy Now</a> 
 
</ul>

весь мой КСС в

залежи

.columns { 
    float: left; 
    width: 31%; 
    padding: 8px; 
} 

/* Style the list */ 

.price { 
    list-style-type: none; 
    border: 3px solid #eee; 
    margin: 0; 
    padding: 0; 
    -webkit-transition: 0.3s; 
    transition: 0.3s; 
    text-align: center; 
    border-radius: 7%; 
} 

/* Add shadows on hover */ 

.price:hover { 
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); 
} 

@media only screen and (max-width: 600px) { 
    .columns { 
    width: 100%; 
    } 
} 

/* Pricing header */ 

.price .header { 
    background-color: white; 
    color: white; 
    border-radius: 36px 36px 0px 0px; 
} 

/* List items */ 

.price li { 
    margin-left: 4%; 
    padding: 5%; 
    text-align: center; 
} 

/* Grey list item */ 

.price .annualPrice { 
    background-color: #1BA5E0; 
    margin: 0px; 
    font-style: bold; 
    color: white; 
    height: 75px; 
} 

.subTitle { 
    background-color: #1BA5E0; 
    padding: 3%; 
    color: white; 
} 

/* The "Sign Up" button */ 

.button { 
    background-color: #1ba5e0; 
    border: none; 
    color: white; 
    padding: 3% 5%; 
    text-align: center; 
    text-decoration: none; 
    font-size: 18px; 
} 

.button:hover { 

    background-color: #1B43F9; 
} 

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */ 

.header { 
    margin-bottom: 8.5%; 
} 

.price li { 
    background: url(http://presentationsolutions.eu/new2/wp-content/uploads/2016/11/check.png) no-repeat left top; 
    height: 10%px; 
    padding-left: 14%; 
    padding-top: 0%; 
    text-align: left; 
} 

.buyCompareButton { 
    margin: 12% 0% 8% 0%; 
    font-family: "myriad-pro","myriad-pro",sans-serif !important; 
    font-weight: 300!important; 
    font-size: 1.2em; 
    line-height: 28px !important; 
} 

Answer 1

Проблема может быть, что ваш сайт использует различные таблицы стилей.

Постарайтесь написать! Важно позади вашего цвета.

Ваш CSS код:

.button:hover { 
    color: white !important; 
    background-color: #1B43F9; 
}