目的

Bootstrapで作ったヘッダーの検索ボタン、ホバーしたときの文字色が黒でかわいくないので変更します。

今回やること

今回の目標は1つ！

検索ボタンをホバーしたときの文字色を変更する

環境

windows 10
ruby 3.0.4
rails 6
Bootstrap 5.0.2

いざ出陣

Bootstrapで作成したヘッダーの検索ボタンには、 btn-outline-success クラスが付いています。

app\views\layouts\application.html.erb

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success border-2" type="submit">Search</button>
</form>

btn-outline-success クラスのことは、枠線色を変更したときにscssに書いていたので、その下に以下を追加します。
あるクラスのhoverしたときの設定は、 :hover をつけて指定できます。

app\assets\stylesheets\application.scss

/*追加*/
.btn-outline-success:hover {
  color: $light;
}

余談

ついでに、文字が真っ黒なのかわいくないので変えたいけど、
背景とのバランスもあると思うので、背景を変えてからやろう。