優化以下代碼以顯示隱藏懸停

我想優化下面的代碼n<li>。優化以下代碼以顯示隱藏懸停

當徘徊在兩個<li> S中對應的「詳細信息1」，並顯示「詳細信息2」，但我不想一次又一次地改寫了同樣的功能進一步<li> S IN的情況下有超過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(); 
     }); 
      });  `

來源

2017-05-25 ABHINAV KUMAR

這是JavaScript解決方案：jsfiddle - JS

這是CSS解決方案：jsfiddle - CSS

來源

2017-05-25 09:31:57

謝謝，但我不認爲我們的有3華里有相同的ID，也可見元素必須是即使它是懸停在其自身上，也是可見的，這就是爲什麼函數被編寫爲懸停在Details上的原因 –

@ABHINAVKUMAR我編輯了代碼片段的答案和3 ID，這是快速錯誤，您可以使用任何其他屬性，那只是一個例子。 –

@ABHINAVKUMAR我編輯了這篇文章，並且我又添加了一個CSS解決方案 –

優化以下代碼以顯示隱藏懸停

回答

相關問題