Question

有多个具有共同类的div。我希望使用它的类来隐藏/显示每个div。我更喜欢使用mouseenter / mouseleave。但问题是$target = this.id;似乎无法发挥作用。

如何使用班级显示/隐藏DIV？

$(".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();
            });

编辑： jsFiddle

Answer 1

不是将多个on()方法链接在一起，更好的方法是将所有事件组合成一个方法：

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

希望这有帮助。

Please see this demo.

Answer 2

尝试使用jQuery（this）或$（this）来使用您正在进入/离开的元素，并希望添加/删除隐藏类。

$(".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

使用

target = $(this);

this将引用您想要的HTMLDiv。您必须将其转换为jQuery对象才能使用jQuery函数.is(':visible')或.hide()。

       .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();
        });

我已将目标更改为img元素，因为如果您隐藏整个潜水，则永远不能再将其重新带回mouseenter。

编辑：

作为替代解决方案，您可以使用不透明度而不是隐藏。

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

示例Hiding only the image 示例Hiding the div with opacity

Answer 4

更新了您的代码。希望有所帮助：）

$(".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();
        });

在鼠标悬停（悬停）时，显示和隐藏（切换）子元素

4 个答案: