为show hide hover优化以下代码

Question

我想为 n <li>优化以下代码。

当悬停在两个<li>上时，会显示相应的“详细信息1”和“详细信息2”，但我不想再次重写相同的功能以进一步<li>如果有超过2个，所以我需要帮助优化代码。

 <li id="placePolicy"><a href="#">PLACE A POLICY</a> </li>
 <li id="growBussiness"><a href="#">GROW MY BUSINESS</a></li>

 <div id="Details1">qwrqwrqwre</div>
 <div id="Details2">qwrwqrwrqwrqrq</div>


  $(function() {
      $('#placePolicy').hover(function() { 
       $('#Details1').show(); 
      }, function() { 
    $('#Details1').hide(); 
     });
     });
      $(function() {
          $('#Details1').hover(function() { 
       $('#Details1').show();   
         }, function() { 
          $('#Details1').hide(); 
        });
           });  


           $(function() {
          $('#growBussiness').hover(function() { 
               $('#Details2').show(); 
            }, function() { 
              $('#Details2').hide(); 
         });
        });
           $(function() {
           $('#Details2').hover(function() { 
              $('#Details2').show();   
         }, function() { 
             $('#Details2').hide(); 
        });
            });     `

Answer 1

这是JavaScript解决方案：jsfiddle - JS

这是CSS解决方案：jsfiddle - CSS