Select parent on hover using jQuery

Question

I am trying to change the css .target , which is the parent of the .hover . This code doesn't seem to work - I'm not sure if I need $ (this) at the beginning of my function, or $ ('. Target') ... I think it could be .target, because that’s what that I am changing css with .css() .

 <script type="text/javascript"> $(document).ready(function() { $('.hover').hover( function(){ $(this).parent().siblings('.target').css('display', 'inline'); }, function(){ $(this).parent().siblings('.target').css('display', 'none'); } ); }); </script> 

And here is my hunch (which doesn't work either):

 $('.target').parent(this).sibling().css('display', 'inline'); 

And here is the html

 <div class="target" style="display: none;"> </div> <div> <span class="hover">Hover</span> </div> 

EDIT ----------------- It does not seem to work if span class="hover" .

EDIT num dos dos -------------------- It seems that I had <span> two parents deeply and needed .parent().parent() Thanks.

Answer 1

Andy, Check this script, it seems you have the correct code in the first example that you posted. If you could post your html we could better help. http://jsfiddle.net/nKtzB/3/

Answer 2

Assuming your html is what you expect and without seeing it, I cannot comment on the improvements, this should work:

 $('.target').parent().siblings('.target').css('display', 'inline'); 

Or, if the .target element is the following sibling:

 $('.target').parent().next('.target').css('display', 'inline'); 

Or, if the previous brother (and from the html you published is the previous brother):

 $('.target').parent().prev('.target').css('display', 'inline'); 

Literature:

• .siblings() .
• .parent() .
• .sibling() .
• .prev() .
• .next() .

Answer 3

Try using display:block instead if you are trying to do something with a block.

Your code is still beautiful, see http://jsfiddle.net/Mx4ks/1/

---

Something else should be wrong .. Try pasting your HTML too :)

See your code here: http://jsfiddle.net/Mx4ks/