views:

148

answers:

1

Hello

I am curious to know, how you target a child, when hover on a parent?

How I would do in CSS:

parent:hover child {
background-color: #FFFFFF;
}

How do you do this in jQuery? ".medarbejdere .info span.kontaktinfo" is my Parent. I would like $(this) to be my child.

var navDuration = 150; //time in miliseconds
  var forstoer = "150px";

  $('.medarbejdere .info span.kontaktinfo').hover(function() {
      $(this).animate({ 'right' : "+="+forstoer }, navDuration);            
  }, function() {
      $(this).animate({ 'right' : "-150px" }, navDuration);
    });

Thank you in advance...

+3  A: 

Use $(this).children().

Ex:

var navDuration = 150; //time in miliseconds 
var forstoer = "150px"; 

$('.medarbejdere .info span.kontaktinfo').hover(function() { 
    $(this).children().animate({ 'right' : "+="+forstoer }, navDuration);             
}, function() { 
    $(this).children().animate({ 'right' : "-150px" }, navDuration); 
});
tvanfosson
Thank you very much. It worked as a charm!! :-)
Kenneth B
What if you want to target a child 3 (child of a child of a child)??In CSS it would be:parent:hover child1 child2 child3 {//magic}
Kenneth B
@Kenneth B -- use classes and class selectors? Seriously, I would expect these to be related somehow and assigning them a class that you can then use to apply behavior (or styling) to them would be much easier than complicated traversal rules.
tvanfosson
@tvanfosson -- I'm making a website for a client, which is very dynamic because of jQuery. It can't be done with pure CSS.
Kenneth B
@Kenneth B -- I never said that you should only use CSS, but you can still apply classes either server-side or using jQuery, then take advantage of those classes in your javascript code. For example, use a class to mark a menu item, like `<a href="/controller/action" class="menu-item">Menu Item</a>`, then use a class selector to add the hover animations, `$('.menu-item').hover( in, out )` or a click handler `$('.menu-item').click( function() { ... } )`.
tvanfosson