Jquery : Different .hover() functions on a Div and its children

Question

First please let me thank you all for having taught me css and jquery, I have learned everything reading answers...it is awesome.

I have tried answers I could find that tried to solve this problem but none works to me.

I'll therefore explain the seemingly simple problem :

I have a div that has a hover function bound to it, and it has a child element that I want not to bear that hover function. I have tried the .bind(), event.target, .off(),.mouseenter/.mouseleave and the event.preventDefault()methods but couldn't get them to work. The structure is this one :

    <figure>
     <p class="zolayer"> click to view image </p>
     <a>
      <img> this is image a
      </img>
      <img> image b, the image that is toggled on click
      </img>
     </a>
     <figcaption> Dummy caption here
      <strong> click me </strong>
     </figcaption>
    </figure>

So the figure has a hover event, as well as the strong elem, but I am trying to get the figcaption element free from its parent hover function and it doesn't work. Hovering the child it triggers its parent's event.

here is the last piece of code I have tried :

• Figure: hover function:

    var zoop = $('.zolayer').parent();
    $(zoop).each(function() {
        $(this).hover(function() {
            $(this).find('img').removeClass('sharp').addClass('blur');
            $(this).find('.zolayer,.zolayer *,.clicker').css('cursor', 'pointer').fadeIn(200, function() {});
        }, function() {
            $(this).find('img').removeClass('blur').addClass('sharp');
            $(this).find('.zolayer,.zolayer *,.clicker').removeClass('zoborder').fadeOut(200, function() {});
        });
    });

• the STRONG element's hover function : it is a switch button that toggles an image on top of the other

var $hfs = $('figcaption strong:contains("here")');
$($hfs).each(function() {
    var ref = $(this);
    var hfp = $(this).parent('figcaption').parent('figure figure');
    $(hfp).css('overflow', 'hidden');
    $(this).not('figcaption').hover(function() {
        $(hfp).find('a img').removeClass('blur');
        $(hfp).find('.zolayer,.clicker').hide();
    }, function() {
        $(hfp).find('a img').addClass('blur');
        $(hfp).find('.zolayer,.clicker').show();
        //$(hfp).find('#tip').remove();
    });
    var clicks = 0;
    $(this).click(function() {
        if (clicks == 0) {
            $(hfp).find('.zolayer,.clicker').hide();
            $(hfp).find('.imgovera,.imgoverb,.imgoverc').fadeIn('fast');
            clicks++;
        } else {
            $(hfp).find('.zolayer,.clicker').hide();
            $(hfp).find('.imgovera,.imgoverb,.imgoverc').fadeOut('fast');
            clicks--;
        }
    });
});

It is a thumbnail with a shady layer (.zolayer) on it, when you hover it it blurs the image that is contained in the figure element , it's a nice hover effect but the figure's event gets propagated to the figcaption, which I need free from that. Other than that the rest works.

Also I have managed to once set it free from that, but it would break the parent's event as moving the cursor from figcaption to zolayer's parent wouldn't trigger the hover event that is bound it it. I posted code that's meant to prove clear to you although it could be better.

Thank you very much in advance for your time and suggestions.

UPDATE : this is another way I have tried with event.target:

var zoop = $('.zolayer').parent();
$(zoop).each(function (e) {
    var fc = $(this).find('figcaption');

    $(zoop).on('mouseenter', function (e) {
        if ($(e.target).is(fc)) {
            $(this).find('img').removeClass('blur').addClass('sharp');
            $(this).find('.zolayer,.zolayer *,.clicker').removeClass('zoborder').hide();
        }
        else if ($(e.target).is('figure img,figure a')) {
            $(this).find('img').removeClass('sharp').addClass('blur');
            $(this).find('.zolayer,.zolayer *,.clicker').css('cursor', 'pointer').fadeIn(200);
        }
    });
    $(zoop).on('mouseleave', function (e) {
         
        $(this).find('img').removeClass('blur').addClass('sharp');
        $(this).find('.zolayer,.zolayer *,.clicker').removeClass('zoborder').fadeOut(200);
    
         
    }); 
});

it stops the parent's event but it doesn't let one transition between those elements and have it all work at all, the parent's event just stops working.

SOLUTION :

This is the solution that works for me, maybe some will want to use it as a nice thumbnail effect on hover. It works because I cumulated the Mouseover and Mouseenter events which I have found completely randomly: UPDATE : this is another way I have tried with event.target:

var zoop = $('.zolayer').parent();
$(zoop).each(function() {
    var fc = $(this).find('figcaption');
    $(this).on('mouseover mouseenter', function(e) {
        if ($(e.target).is(fc)) {
            e.stopPropagation();
        } else {
            $(this).find('img').removeClass('sharp').addClass('blur').parent().parent().find('.zolayer,.zolayer *,.clicker').css('cursor', 'pointer').fadeIn(200, function() {});
        }
    }).mouseleave(function() {
        $(this).find('img').removeClass('blur').addClass('sharp').parent().parent().find('.zolayer,.zolayer *,.clicker').removeClass('zoborder').fadeOut(10, function() {});
    });
    $(fc).mouseenter(function() {
        $(this).parent().find('img').removeClass('blur').addClass('sharp').parent().parent().find('.zolayer,.zolayer *,.clicker').removeClass('zoborder').fadeOut(10, function() {});
    }).mouseleave(function(e) {
        if ($(e.target).is($(this).parent().find('a, a img,.zolayer'))) {
            e.stopPropagation();
            $(this).parent().find('img').removeClass('sharp').addClass('blur').parent().parent().find('.zolayer,.zolayer *,.clicker').css('cursor', 'pointer').fadeIn(200, function() {});
        } else { $(this).parent().find('img').removeClass('blur').addClass('sharp').parent().parent().find('.zolayer,.zolayer *,.clicker').removeClass('zoborder').fadeOut(10, function() {}); }
    });
});