質問: 現在webサイトを作っているのですが、タイトルにも書いた通り、カーソルで選択したテキストにホバーするとtextareaが表示されコメントが打てるというシステムを作りたいと考えています。機能的にはwordのコメント機能みたいなものを想像しています。 初心者で具体的な実装方法が分からないので、必要言語と方法を教えていただけると幸いです。 ↓今書いているコードです。 ``` テキストテキストテキストテキストテキストテキストテキストテキスト ``` ``` @charset "UTF-8"; p::selection { color: white; background: rgb(232, 203, 255,.7); } ``` ↓補足です ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f112242bc592f7038eaf37e0226ff469.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5fbad5b7c350d6776a24eac73c9913fa.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/41d3a7ae22b7747221e339e7bcbf5583.png)
回答: ずっとテキストエリアなんだけど カーソルでホバーした時:テキストエリアの見た目 ホバーしてないとき:通常のテキストのような見た目 というようにホバーの有無でテキストエリアの見た目を変えたいだけならCSSのみでも`:hover`疑似クラス等を活用することで出来るのではないでしょうか。 「通常のテキストっぽい見た目にするのではなく実際に通常のテキストにしたい」 「テキストエリア以外の項目の色や表示も変えたい」 というのであれば`JavaScript`の知識も必要になるかと思います。 **----- 補足 -----** 上で記載した内容は、質問者様が画像で説明しているような 「カーソルでホバーした時にコメント追加のUIや吹き出しを表示する」 という見た目の実現に限った回答です。 「コメントとして追加した内容を他の利用者にも見えるようにしたい」 「複数の利用者で会話できるようにしたい」 といった機能を実現するためには、 ほかの方が回答してくださっているように 「入力されたコメントをどこかに保存する仕組み」 「保存してあるコメントを読み込んで表示する仕組み」 を別に作る必要があります。