javascript - How to use jQuery to hide/show certain divs on hover? -

i've got list of links embedded in <ul> so

<ul class="list">     <li id="1"><a href="url1">result 1</a></li>     <li id="2"><a href="url2">result 2</a></li>     <li id="3"><a href="url3">result 3</a></li>     <li id="4"><a href="url4">result 4</a></li> </ul> 

and have <ul> displays information goes results list:

<ul class="summary">     <li id="1"><p>result 1 info</p></li>     <li id="2"><p>result 2 info</p></li>     <li id="3"><p>result 3 info</p></li>     <li id="4"><p>result 4 info</p></li> </ul> 

how make can hover on li in list , displays li in summary goes respective li hover? jquery code:

$("ul.summary li").hide(); $("ul.summary li:first-child").show();  $("ul.lsit li").hover(function(){     var id = $(this).attr("id");     $("ul.summary li#"+id).show(); }) 

id should unique. instead can of eq() , index() , siblings()

$("ul.summary li").hide();  $("ul.summary li:first-child").show();    $('ul.list li').hover(function() {    $('ul.summary li').eq($(this).index())      // using eq() can select element using index      // index() returns index based on it's siblings      .show()      //show element using show()      .siblings().hide();      // use siblings() siblings , hide them using hide()  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul class="list">    <li><a href="url1">result 1</a>    </li>    <li><a href="url2">result 2</a>    </li>    <li><a href="url3">result 3</a>    </li>    <li><a href="url4">result 4</a>    </li>  </ul>  <ul class="summary">    <li>      <p>result 1 info</p>    </li>    <li>      <p>result 2 info</p>    </li>    <li>      <p>result 3 info</p>    </li>    <li>      <p>result 4 info</p>    </li>  </ul>

update : if want change order can set custom attribute ,

$("ul.summary li").hide();  $("ul.summary li:first-child").show();    $('ul.list li').hover(function() {    $('ul.summary li').eq($(this).data('target'))      // using eq() can select element using index      // custom attribute value using data()      .show()      //show element using show()      .siblings().hide();      // use siblings() siblings , hide them using hide()  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul class="list">    <li data-target=3><a href="url1">result 1</a>    </li>    <li data-target=2><a href="url2">result 2</a>    </li>    <li data-target=1><a href="url3">result 3</a>    </li>    <li data-target=0><a href="url4">result 4</a>    </li>  </ul>  <ul class="summary">    <li>      <p>result 1 info</p>    </li>    <li>      <p>result 2 info</p>    </li>    <li>      <p>result 3 info</p>    </li>    <li>      <p>result 4 info</p>    </li>  </ul>