目的
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;
}
余談
ついでに、文字が真っ黒なのかわいくないので変えたいけど、
背景とのバランスもあると思うので、背景を変えてからやろう。