ホバーボタンが正しく機能しない

Question

マウスの上にカーソルを置くと、ボタンのテキストを白く変更しようとしています。しかし、私のボタンの上にマウスを置くと、テキストの色は白に変わるのではなく灰色に変わりますが、背景が正しい色に変わります。つまり、正しい要素の上に乗っていることを意味します。これを検査したところ、button:hoverは既存のテキストホバーカラーで上書きされているようです。現在の灰色のホバーカラーを削除し、白いホバーカラーを使用する方法はありますか？あなたのウェブサイトが、別のスタイルシートを使用している可能性があり

.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; 
 
    background-color: #1B43F9; 
 
}

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

を休閑として

私のコードです。

あなたの色の後ろに重要なことを書いてみてください。

あなたのCSSコード：あなたが作成した

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