jQuery Trigger a child element when parent is hovered

Question

I have a list with nested divs that are holding two images stacked above each other absolutely. I have established a hover effect that creates a smooth transition effect. However, the effect only triggers when the mouse is over the image and is not triggered when the mouse is above the link. Here is my code for a brief idea:

<ul id="shortcuts" class="sitewidth">
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
            <h2>Hello World!</h2>
        </a>
    </li>

    <script type='text/javascript'>
        $(document).ready(function(){
            $("img.a").hover(function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            }, function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });
        });
    </script>
</ul>

I do realize that the hove function should be done on #shortcuts li a rather than the image itself. But this code is working and will give you a rough idea of what I'm looking for. Your kind help is very much appreciated.

PSL · Accepted Answer · 2013-04-23T05:27:50.907

2

Try this:- Not sure how exactly you want to appear, but here are my tries.

Only one image*

http://jsfiddle.net/tQwDk/

Both the images

http://jsfiddle.net/GcJG5/

 $("#shortcuts li").hover(

function () {
    $('img.a', this).stop().animate({
        "opacity": "0"
    }, "slow");
},

function () {
    $('img.a', this).stop().animate({
        "opacity": "1"
    }, "slow");
});

edited Apr 23 '13 at 05:27

answered Apr 23 '13 at 05:16

PSL

123,204
21
253
243

1

That worked perfectly! How silly of me, instead of hovering the , we could just apply the hover to the list item itself! Thank you, good sir! – Mubashar Aftab Apr 23 '13 at 06:30

score 0 · Answer 2 · answered Apr 23 '13 at 05:31

Try

$(document).ready(function() {
    $("a").has('img.a').hover(function() {
            $('img.a', this).stop().animate({
                        "opacity" : "0"
                    }, "slow");
        }, function() {
            $('img.a', this).stop().animate({
                        "opacity" : "1"
                    }, "slow");
        });
});

score 0 · Answer 3 · answered Apr 23 '13 at 06:28

My first thought was to add a hover event to the Hello World h2 and call trigger on the images hover event:

$("#shortcuts li a h2").hover(function(){
  $(this).parent.find('img.a').trigger('hover');
});

Unfortunately it isn't possible to trigger pseudo-selectors like hover.

Fortunately, I believe the following will give you the result you need. You can use mouseenter and mouseleave on the parent link, then find the child image and animate it.

$(document).ready(function(){
    $("#shortcuts li a").mouseenter(
        function() {
            $(this).find('img.a').stop().animate({"opacity": "0"}, "slow");
     }).mouseleave(
        function() {
            $(this).find('img.a').stop().animate({"opacity": "1"}, "slow");
    });

});

jQuery Trigger a child element when parent is hovered

3 Answers3