railsで個人開発を行なっております。
その中で実装に躓いた時に知ることができた情報を、備忘録のような形で残せれば良いなと思い始めました。
達成したいこと
[実装要件]
ボタンをホバーした時、ボタンだけでなく、ボタンの中の文字の色も変化するようにしたいと思いました。
具体的には、以下のような挙動です。
初期状態
↓
↓
ホバーした状態
今までの実装
今までの実装では、
<div class="a">
<%= link_to "パス", class="btn btn-primary b" %>
</div>
のような形でrailsのコードを書き、
クラスaとクラスbにそれぞれCSSを当て、それぞれがホバーされた際、CSSが変化されるよう実装していました。
具体的には以下のような感じの実装です。
例: 今までの実装(.scssファイル)
.a{
クラスaのもとの状態
}
.b{
クラスbのもとの状態
}
.a:hover{
クラスaをホバーした時の状態
}
.b:hover{
クラスbをホバーした時の状態
}
ただ、このような場合だと、ボタンのふちをホバーしてもボタンの文字まで触れなければ、ボタンの文字色は変化しません。
そこで、これを解決できるよう実装を変更しました。
改善した実装
Qiitaで調べていたところ、別の記事で別の要素をホバーした時に、スタイリングを行うといった記事が出できましたのでこちらを参考にさせていただきました。[1]
例: 改善した実装(.scssファイル)
.a{
クラスaのもとの状態
}
.b{
クラスbのもとの状態
}
.a:hover{
クラスaをホバーした時の状態
}
.a:hover .b{
クラスbをホバーした時の状態
}
最後部分のみ実装を変化させました。
このようにコードを変化させるでボタンにホバーしたタイミングでボタン内の文字の色(情報)を変更することができます。