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


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

[code]

    <style>
    #box:hover { /* css */ }
    </style>
    
    <div id="box">てきすと</div>
    
[/code]

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

[code]

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

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




mjy様の回答はとても参考になりました。canvasを使える環境であれば、示していただいた手法が解決法の一つとなるでしょう。また、このことを参考に自分でも調査をしてみると、<https://stackoverflow.com/questions/1936021/javascript-
eyedropper-tell-color-of-pixel-under-mouse-cursor>
というQAを発見し、こちらにもやはりcanvasを利用した回答、そして

> It's not possible with JavaScript as it goes against cross-domain security.

というようにjsではここまでが限界のようです。また、

> 通常のHTML要素で描画されている字形に対して、判定を行ないたい

のです。おっしゃるとおりです。

さて私は以前[html2canvas](https://html2canvas.hertzen.com/)というライブラリを使用したことがありまして、これはDOMを読んで独自にレンダリングしcanvas要素にスクリーンショットのようなものを生成してくれるライブラリです。画像の読み込みやiframe,flashなどへのサポートは技術的な制約もあり不完全ですが、テキスト目的という今回の趣旨については十分でしょう。  
判定処理の発想はそのままですが、このスクリーンショットの画像を利用したサンプルを作ってみました。

[code]

    var target = document.querySelector('#box');
    var ssCtx;
    
    html2canvas(target, {
      onrendered: function(canvas) {
        ssCtx = canvas.getContext('2d');
      }
    });
    
    target.addEventListener('mousemove', function (e) {
      if (ssCtx) {
        var pixel = ssCtx.getImageData(e.offsetX, e.offsetY, 1, 1);
        target.className = pixel.data[3] ? 'text_shape_hover' : '';
      }
    });
[/code]

[code]

    #box {
      font-size: 200px;
      font-weight: bold;
      transition: color 0.3s;
    }
    #box.text_shape_hover {
      color: red;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    
    <div id="box">てきすと</div>
[/code]

結果は良好です。細部について（背景色/scroll/動作負荷/各環境のサポート）については未検証ですが、少なくともテキスト要素について利用するならば、canvasをサポートしてさえいればうまく動作するよう実装できるはずです。

結局canvasで力技かよ、と自分でも思いますが、以上で一応の自己解決として回答を載せておきたいと思います。




mjy様の回答はとても参考になりました。canvasを使える環境であれば、示していただいた手法が解決法の一つとなるでしょう。また、このことを参考に自分でも調査をしてみると、<https://stackoverflow.com/questions/1936021/javascript-
eyedropper-tell-color-of-pixel-under-mouse-cursor>
というQAを発見し、こちらにもやはりcanvasを利用した回答、そして

> It's not possible with JavaScript as it goes against cross-domain security.

というようにjsではここまでが限界のようです。また、

> 通常のHTML要素で描画されている字形に対して、判定を行ないたい

のです。おっしゃるとおりです。

さて私は以前[html2canvas](https://html2canvas.hertzen.com/)というライブラリを使用したことがありまして、これはDOMを読んで独自にレンダリングしcanvas要素にスクリーンショットのようなものを生成してくれるライブラリです。画像の読み込みやiframe,flashなどへのサポートは技術的な制約もあり不完全ですが、テキスト目的という今回の趣旨については十分でしょう。  
判定処理の発想はそのままですが、このスクリーンショットの画像を利用したサンプルを作ってみました。

[code]

    var target = document.querySelector('#box');
    var ssCtx;
    
    html2canvas(target, {
      onrendered: function(canvas) {
        ssCtx = canvas.getContext('2d');
      }
    });
    
    target.addEventListener('mousemove', function (e) {
      if (ssCtx) {
        var pixel = ssCtx.getImageData(e.offsetX, e.offsetY, 1, 1);
        target.className = pixel.data[3] ? 'text_shape_hover' : '';
      }
    });
[/code]

[code]

    #box {
      font-size: 200px;
      font-weight: bold;
      transition: color 0.3s;
    }
    #box.text_shape_hover {
      color: red;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    
    <div id="box">てきすと</div>
[/code]

結果は良好です。細部について（背景色/scroll/動作負荷/各環境のサポート）については未検証ですが、少なくともテキスト要素について利用するならば、canvasをサポートしてさえいればうまく動作するよう実装できるはずです。

結局canvasで力技かよ、と自分でも思いますが、以上で一応の自己解決として回答を載せておきたいと思います。

