WordPressで追加CSSのhoverが意図したように機能しない。

Question

WordPressでHPを作成しています。
ボタンのカスタマイズをしているのですが、cssが意図したように機能しません。
解決策をご教示いただけると幸いです。

目標：
ポインターを合わせるとボタンの背景色とテキストの色が変化する。

障害：
ボタンの背景色は変化するが、テキストの色が変化しない。

コード：ボタン本体

<div class="wp-block-button has-custom-width wp-block-button__width-25 has-custom-font-size ”sample1” is-style-outline has-medium-font-size"><a class="wp-block-button__link has-black-color has-text-color" href="https://ec1test.wp.xdomain.jp/flexibility/" style="border-radius:100px" rel="">詳細</a></div>

コード：追加CSS

.wp-block-button:hover{
	background: #000;
	border-radius:100px;
	color: #FFF;
	text-decoration: none;

}

Answer 1

テキストの色は .wp-block-button__link の色が使われます。.wp-block-button:hover の色を適用させたければ以下のように、親要素から color プロパティを継承してください。

.wp-block-button__link {
  color: inherit;
}

Comments

[kouji1123]

早速のご回答心より感謝します。
ご指摘いただいた内容をもとに追加CSSを修正したのですが、状況が変わらない状態です。
もし、原因が分かりましたらご教示いただけると嬉しいです。

ーー
.wp-block-button:hover{
background: #000;
border-radius:100px;
color: #FFF;
text-decoration: none;
}

.wp-block-button__link{
color: inherit;
}

ーー