Hover To Show Furigana For Most Websites (CSS + Extension)

In short, use stylus extension to apply custom style sheets. (Some browsers support "custom user stylesheets" out of the box.)

In the extension, create a new style, paste this CSS and apply it to all websites.

ruby rt {
      opacity: 0 !important; 
      transition: opacity ease 0.3s !important;
   }

ruby:hover rt{
      opacity: 1 !important; 
   }

And you get this

https://i.redd.it/m4dv6yhtw6yg1.gif

I don't know much about Web Dev but this should work for most websites as they use <ruby> and <rt> tags to show the furigana. The CSS style should also work for Anki and Yomitan.

Just a convenient way I have come across to glance at the furigana.

I hope it helps somebody.

by tonkachi_