HTML・CSS Writing 2022

Makes the characters glow when the mouse is over

To make the text glow when the mouse is over, specify "opacity: opacity;" as the style of a: hover.

It's easy to take advantage of the fact that it looks shiny as the transparency increases. It's a good idea to fine-tune the opacity from around 0.8.

<style>
  .mouse-over-light a: hover {
    opacity: 0.8;
  }
</style>

<div class = "mouse-over-light">
  <a href="/"> Shines when hovering</a>
</div>

What is the effect of shining when hovering?

When you bring the mouse up, it glows and you can intuitively press it.

On smartphones, it has nothing to do with it, so you should consider this effect as a supplementary effect and consider a design that you can press just by looking at it.