Seleccione el hermano del padre en hover con 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() Gracias.

preguntado el 08 de noviembre de 11 a las 19:11

Estás llamando .sibling() (which doesn't exist) or .siblings() (que hace)? -

see the jsfiddle links posted, class="hover" works fine on a span :) -

3 Respuestas

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');

Referencias:

respondido 08 nov., 11:23

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/

respondido 08 nov., 11:23

Intenta usar 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/

respondido 08 nov., 11:23

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.