title: Events using $(this)
body: <p>My issue here is primarily jQuery...</p>
  
  <p>I'm wanting to have events fire when a certain interaction is carried out however... only for "this" particular item provided all items are identical. </p>
  
  <p>Firstly I'm not sure why the hover state is not firing - the console log shows the interaction is there however, not triggering the div to appear. I need the "show-me" div to appear when only hovered on the span and mouseoff for the div to disappear.</p>
  
  <p>Also when the user clicks "select" for the options to ONLY hide for the current item input they selected - not all options to hide. </p>
  
  <p>I'm having trouble trying to find a way to select elements that are somewhat out of scope as .find() will only find descendants - I want to have my mark up elsewhere and be able to select the element regardless of where it's location is within the markup.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/RSapL/13/" rel="nofollow">JSFIDDLE</a> of a working example for you to potentially "fiddle" with ;-) </p>
  
  <p>All suggestions welcome! </p>
  
  <p><strong>Here is my jQuery</strong></p>
  
  <pre><code>//Show item on hover for current item hovered
  var item = $('.item'),
      itemShow = $('.show-me');
  
  item.hover(function() {
      $(this).nextAll('.show-me').show();
      console.log("hovered");
      }, function() { 
      $(this).nextAll('.show-me').hide();
  });
  
  
  //Click select to hide options 
  $('.item').find('input').on('click', function() {
      $(this).nextAll('ul').hide();
      console.log("select was clicked");
  });
  </code></pre>