Question

I’ve got a list which i want to have a share/delete showing on hover

<ul class="folder-items">

  <li><a href="">This</a></li>
    <div class="folder-hover"><a href="">share</a><a href="">delete</a></div>

   <li><a href="">That</a></li>
    <div class="folder-hover"><a href="">share</a><a href="">delete</a></div>

  <li><a href="">Other</a></li>
    <div class="folder-hover"><a href="">share</a><a href="">delete</a></div>

</ul>

but it is targeting all of the .folder-hover when I hover over the .folder-items a

How do I get it so it only toggles the div on that specific li element

my current jquery is

$(document).ready(function () {
   $('.folder-items a').hover(function(){
     $('.file-hover').toggle();
   });
});​

Answer 1

First off, your markup is invalid (div cannot be a direct child of ul). If you fix that, you can use siblings to select the appropriate folder-hover:

HTML:

<ul class="folder-items">

  <li><a href="">This</a>
    <div class="folder-hover"><a href="">share</a><a href="">delete</a></div>
  </li>

   <li><a href="">That</a>
    <div class="folder-hover"><a href="">share</a><a href="">delete</a></div>
   </li>

  <li><a href="">Other</a>
    <div class="folder-hover"><a href="">share</a><a href="">delete</a></div>
  </li>

</ul>

JavaScript:

$('.folder-items a').hover(function(){
   $(this).siblings('.folder-hover').toggle();
});