CSS/Javascriptでテキストにマウスカーソルが乗っているかの判定

HTMLにおいてCSSまたはJavaScriptを利用しテキスト（テキストを含む要素ではなく、テキスト、文字それ自体）にマウスカーソルが乗っているかを判定し効果をつける方法はありますか。
CSSなら

<style>
#box:hover { /* css */ }
</style>

<div id="box">てきすと</div>

というのではなくて、たとえば疑似コードを書くなら

<style>
#box:textShape:hover { /* css */ }
</style>

みたいなことです。
SVGのを利用した方法については確認済みですので、タイトルの通りCSSあるいはJavaScriptで可能かどうかを教えていただきたく、また可能であれば参考になるページなどを示していただければ幸いです。
よろしくおねがいします。