Home>
Thing I want to do

I want to make the font smaller except where the mouse is placed.

Example)
When you hover your mouse over the details, the "detailed characters" is 20px, while the font for the other two characters (edit and delete) is 10px.

Is there such an animation? Currently, hover is used.

      <% = link_to'Details', item_path (item.id), class: "show"%>
        <% = link_to'edit', edit_item_path (item.id), class: "edit"%>
        <% = link_to'Delete', item_path (item.id), method:: delete, class: "destroy"%>
.show: hover {
Font-size: 20px;
}
Initiatives

https://developer.mozilla.org/ja/docs/Web/CSS/:hover
https://developer.mozilla.org/ja/docs/Web/CSS/:not
I saw articles such as hover on MDN, but I can't find anything like that.

Probably the search power is insufficient.
I would appreciate it if you could let me know if there are any words that are easy to hit in the countermeasures or search.

If hover is difficult, we are considering introducing JavaScript.

  • Answer # 1

    How about the following?

    Add a common class.

          <% = link_to'Details', item_path (item.id), class: "btn show"%>
            <% = link_to'edit', edit_item_path (item.id), class: "btn edit"%>
            <% = link_to'Delete', item_path (item.id), method:: delete, class: "btn destroy"%>

    Set the normal and hover font sizes for that class.

    .btn {
      font-size: 10px;
      transition: font-size .5s;
    }
    .btn: hover {
      font-size: 20px;
    }

  • Answer # 2

    : not ()When: hoverI feel like I can do it by combining.

    
         Details 
         Edit 
         Delete 
    
    body {
        font-size: 16px;
    }
    .controls {
        display: inline-block;
    }
    .controls>a {
        display: inline-block;
        width: 5rem;
        text-align: center;
    }
    .controls: hover {
        font-size: 20px;
    }
    .controls: hover>a: not (: hover) {
        font-size: 10px;
    }

    ↓ Screenshot