マウスを載せている箇所以外のフォントを小さくしたい

やりたいこと

　マウスを載せている箇所以外の、フォントを小さくしたい。

　例）
詳細にマウスを載せた時、「詳細の文字」は20pxに対して他の2つの文字（編集と削除）のフォントは10pxになる。

　そのようなアニメーションありますでしょうか？　現在、hoverを用いています。

html
1
2          <%= link_to '詳細', item_path(item.id), class:"show" %>
3          <%= link_to '編集', edit_item_path(item.id), class:"edit" %>
4          <%= link_to '削除', item_path(item.id), method: :delete, class:"destroy" %>
5

html
1.show:hover{
2　font-size: 20px;
3}
4
5

#####取り組み
https://developer.mozilla.org/ja/docs/Web/CSS/:hover
https://developer.mozilla.org/ja/docs/Web/CSS/:not
MDNでhoverなどの記事を拝見しましたが、それっぽいのが見当たりません。

おそらく検索力不足かと思います。
対策や検索にヒットしやすい言葉などがありましたら教えていただけると助かります。

hoverが難しい場合、JavaScriptの導入を検討しています。

行動規範の内容に同意します

回答2件

ベストアンサー

以下でどうですか。

共通のクラスを追加する。

Rails
1          <%= link_to '詳細', item_path(item.id), class:"btn show" %>
2          <%= link_to '編集', edit_item_path(item.id), class:"btn edit" %>
3          <%= link_to '削除', item_path(item.id), method: :delete, class:"btn destroy" %>

そのクラスに対して、通常時とホバー時のフォントサイズを設定する。

css
1.btn {
2  font-size: 10px;
3  transition: font-size .5s; 
4}
5.btn:hover {
6  font-size: 20px;
7}

投稿2020/11/21 15:33

hatena19

総合スコア33790

_nussy_

2020/11/21 15:44

hatena19 様ご返信ありがとうございます！短いコードでイメージしやすいです。共通のクラスを設ける箇所は参考にさせていただきます。

行動規範の内容に同意します

:not()と:hoverを組み合わせたら、できそうな気がします。

html
1<div class="controls">
2	<a href="1" class="show">詳細</a>
3	<a href="2" class="edit">編集</a>
4	<a href="3" class="destroy">削除</a>
5</div>

css
1body {
2	font-size: 16px;
3}
4
5.controls {
6	display: inline-block;
7}
8.controls > a {
9	display: inline-block;
10	width: 5rem;
11	text-align: center;
12}
13.controls:hover {
14	font-size: 20px;
15}
16.controls:hover > a:not(:hover) {
17	font-size: 10px;
18}