マウスホバー時にアンダーラインを表示する方法

1. CSSのみを使用する方法:

   <style>
   .underline-hover {
   text-decoration: none;
   }
   .underline-hover:hover {
   text-decoration: underline;
   }
   </style>
   <p class="underline-hover">ホバー時にアンダーラインが表示されるテキスト</p>

2. JavaScriptを使用する方法:

   <style>
   .underline-hover {
   text-decoration: none;
   }
   .underline-hover.underline {
   text-decoration: underline;
   }
   </style>
   <p class="underline-hover" onmouseover="this.classList.add('underline')" onmouseout="this.classList.remove('underline')">ホバー時にアンダーラインが表示されるテキスト</p>

3. jQueryを使用する方法:

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
   .underline-hover {
   text-decoration: none;
   }
   .underline-hover:hover {
   text-decoration: underline;
   }
   </style>
   <p class="underline-hover">ホバー時にアンダーラインが表示されるテキスト</p>
   <script>
   $(document).ready(function(){
   $('.underline-hover').hover(function(){
     $(this).css('text-decoration', 'underline');
   }, function(){
     $(this).css('text-decoration', 'none');
   });
   });
   </script>

上記のコード例では、CSSを使用する方法とJavaScriptを使用する方法、さらにjQueryを使用する方法を示しています。いずれの方法もホバー時にテキストの下線を表示する効果を実現することができます。自分のウェブページの要件や好みに合わせて、適切な方法を選択してください。