CSSとJavaScriptを使って、テキストにhoverすると、その語句の解説文を表示する仕組みの実装です。次のサンプルは弊社のサービス商品名を5つテキストで並べています。それぞれの名前にhoverすると、文字色を濃く強調し、他の名前をオーバーレイで隠し、右側にそのサービスの簡単な解説を表示します。

JavaScriptは、hoverしたときや外したときのclassの変更に使われています。

サンプルのhtmlソース

<div class="container">
	<h3>サンプル</h3>
  <div class="features">
    <div id="overlay" class="overlay"></div>
    <ul>
      <li>
        <p class="feature"
           onmouseenter="mouseenter(this)"
           onmouseout="mouseout(this)">WEB受注システム&nbsp;百万石</p>
        <p class="explanation">インターネットを利用した受注システムです。既存の販売管理、基幹システムとのデータ連携が可能です。月98,000円(税抜き)でBtoB受注を開始できます。「経費節減+顧客満足度UP」を図るなら、WEB受注をお勧めします！！　まずは受注全体の50%をWEB受注にしてみてはいかがでしょう。      </p>
      </li>
      <li>
        <p class="feature"
           onmouseenter="mouseenter(this)"
           onmouseout="mouseout(this)">WEB受注システム&nbsp;0万石</p>
        <p class="explanation">初期費用・月額費用(規定条件内なら)無料で、WEB受注システムをご利用いただけます！ WEBからお申し込み頂くだけで即ご利用可能です。マニュアルも必要としない簡単操作です。多くの企業様にご利用頂き、高い評価を得ている「百万石 WEB受注システム」の基本機能がそのまま使えます。スマホ・タブレットからも発注できます。 Windows、Mac両対応です。</p>
      </li>
      <li>
        <p class="feature"
           onmouseenter="mouseenter(this)"
           onmouseout="mouseout(this)">百万石&nbsp;購買システム</p>
        <p class="explanation">EDI連動型の 購買システム購買に関わる手間とコストを低減します！　小口仕入先への購買もこのシステムを使えばEDI経由で行えます。明細単位での納期情報やコメント等を、掲示板（BBS）形式でやり取りすることも可能です。</p>
      </li>
      <li>
        <p class="feature"
           onmouseenter="mouseenter(this)"
           onmouseout="mouseout(this)">0万石&nbsp;在庫照会システム</p>
        <p class="explanation">会社の在庫状態が、無料で照会できるサービスです。件数は無制限で登録可能（登録数に関係なく 無料）。管理者用IDを1アカウントと、在庫照会用IDを1アカウント発行可能です。在庫データのアップロード機能（ファイルの項目は弊社仕様をご利用ください。ファイル形式：CSV）。在庫データのダウンロード機能（ファイル形式：CSV、管理者のみ使用可能）。カテゴリー・商品コード・商品名などで検索が可能。ページビュー数の確認が可能（管理者のみ使用可能）。</p>
      </li>
      <li>
        <p class="feature"
           onmouseenter="mouseenter(this)"
           onmouseout="mouseout(this)">定期配達・回収品管理システム</p>
        <p class="explanation">定期的に得意先へ配達・回収を行なっている企業様の「受注業務のWEB化」と、ドライバーへ「配達指示・回収数報告を効率的に管理」するシステムです。正確で効率の良い配送に役立ちます。電話・FAX・メールでの発注をWEB発注に切り替える事によって、御社の受注業務の手間と、人的コストの大幅な削減に貢献いたします。受注データを元にした配送手配や、配送リストをドライバーへ提供することも可能です。</p>
      </li>
    </ul>
  </div>
  <div class="display-area">  </div>
</div>