On mousenter (hover), show and hide (toggle) a child element

Question

There are multiple divs with a common class. I want use its class to hide / show each div when hovered. I'd prefer using mouseenter / mouseleave. But the issue is that $target = this.id; doesn't seem to work.

How do I show/hide a DIV using a class?

$(".zz")
            .on( 'mouseenter', function() {
                $target = this.id;
                if( $target.is(':visible') ) return;
                    $target.hide();
            })
            .on( 'mouseleave', function() {
                    $target = this.id
                    if( !$target.is(':visible') ) return;
                        $target.show();
            });

EDIT: jsFiddle

Answer 1

Instead of chaining multiple on() methods together, a better way is to combine all events into one method:

$(document).on({
    mouseenter: function() {
        $(this).find('div[id^="im"]').hide();
    },
    mouseleave: function() {
        $(this).find('div[id^="im"]').show();
    },
    click: function() {
        // do something else
    }
}, ".zz");

Hope this helps.

Please see this demo.

Answer 2

Try using jQuery(this) or $(this) to use the element your are entering/leaving and want to add/remove the hide class from.

$(".zz")
   .on( 'mouseenter', function() {
      if( $(this).is(':visible') ) return;
      $(this).show();
   })
   .on( 'mouseleave', function() {
      if( !$(this).is(':visible') ) return;
      $(this).hide();
   });

https://jsfiddle.net/n3syhn67/2/

Answer 3

Use

target = $(this);

this will refer to the HTMLDiv you want. You have to transform it into a jQuery object in order to use .is(':visible') or .hide() which are jQuery functions.

       .on( 'mouseenter', function() {
            $target = $(this).find("img");
            if( $target.is(':visible') ) return;
                $target.show();
        })
        .on( 'mouseleave', function() {
                $target = $(this).find("img");
                if( !$target.is(':visible') ) return;
                    $target.hide();
        });

I have changed the target to img element because if you hide the entire dive you can never bring it back on mouseenter again.

EDIT:

As an alternative solution you may use opacity instead of hide.

    .on( 'mouseenter', function() {
            $target = $(this);
            $target.css({opacity:1});
     })
    .on( 'mouseleave', function() {
            $target = $(this);
            $target.css({opacity:0});
     })

Example Hiding only the image Example Hiding the div with opacity

Answer 4

Updated your code. Hope that helps :)

$(".zz")
        .on( 'mouseenter', function(event) {
            $target = $(event.target);
            //$target = this.id;
            if( $target.is(':visible') ) return;
                $target.show();
        })
        .on( 'mouseleave', function(event) {
                $target = $(event.target);
                //$target = this.id
                if( !$target.is(':visible') ) return;
                    $target.hide();
        });