CODEWITHSUNDEEP
jqueryjquery-selectors
Andrew Samuelsen
Andrew Samuelsen

Reputation: 5432

Select sibling of parent on hover with jQuery

I'm trying to change the css of .target that is the sibling of the parent of .hover. Can't seem to get this code to work - I'm not sure if I need $(this) at the beginning of my function, or $('.target')... I think it might be .target because that is what I'm changing the css of 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 also doesn't work):

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

And here is html

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

EDIT----------------- It seems that it doesn't work when a span is class="hover".

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

Upvotes: 6

Views: 14404

Answers (3)

sottenad
sottenad

Reputation: 2646

Andy, Check this fiddle out, you seem to have the correct code in the first sample that you posted. If you could post your html, we might have a better time helping out. http://jsfiddle.net/nKtzB/3/

Upvotes: 5

David Thomas
David Thomas

Reputation: 253318

Assuming your html is as you expect, and without seeing it I can't comment on improvements, this should work:

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

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

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

Or, if the previous sibling (and from the html you posted it is the previous sibling):

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

References:

Upvotes: 9

Marco Johannesen
Marco Johannesen

Reputation: 13134

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

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

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

See your own code in action here: http://jsfiddle.net/Mx4ks/

Upvotes: 0

Related Questions