CODEWITHSUNDEEP
jquery
Soup
Soup

Reputation: 137

creating a hover action on mouseover that triggers element inside div

If I have a set of 2 divs that are next to each other:

            <div class="selector outdoor">
            <div class="bar">
              <a href="#" class="firstOne"><p>Outdoor</p></a>
            </div><!--end of "bar"-->
        </div><!--end of "selector outdoor"-->
        <div class="selector hunter">
            <div class="bar">
              <a href="#" class="firstOne"><p>Hunting</p></a>
            </div><!--end of "bar"-->
        </div><!--end of "selector hunter"-->
        <div class="selector military">

If i want to create a hover action when i mouseover .selector, that triggers only the .bar inside of the div i am hovering over what would my jquery look like? Here's what I have.

$('.selector').hover(function ()  {
    TweenMax.to(this('.bar'), 1, {y:"-154px", ease:Power1.easeInOut});

});
$('.selector').mouseleave(function ()  {
    TweenMax.to(this('.bar'), 1, {y:"0", ease:Power1.easeInOut});
});

I know i can use "this to trigger the object with mouse focus, but i don't know how to use children selectors to move only the one inside of the parent div.

Upvotes: 0

Views: 1103

Answers (1)

nnnnnn
nnnnnn

Reputation: 150080

$(this).find('.bar')

will select only the '.bar' element(s) inside the current element.

I'm not familiar with TweenMax, but I assume you'd end up with code like this:

$('.selector').hover(function ()  {
    TweenMax.to($(this).find('.bar'), 1, {y:"-154px", ease:Power1.easeInOut});
});

If the TweenMax.to() function is expecting a DOM element in that first parameter rather than a jQuery object then use $(this).find('.bar').get(0).

Note also that .hover() and mouseleave() are not opposites. If you supply a single function to .hover() it will be executed on both mouseenter and mouseleave. To do something different on enter and leave supply two functions to .hover() (and don't call mouseleave() at all):

$('.selector').hover(function ()  {
    TweenMax.to($(this).find('.bar'), 1, {y:"-154px", ease:Power1.easeInOut});
},function ()  {
    TweenMax.to($(this).find('.bar'), 1, {y:"0", ease:Power1.easeInOut});
});

Or use .mouseenter() and .mouseleave() but not .hover().

Upvotes: 2

Related Questions