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

【问题标题】：On mousenter (hover), show and hide (toggle) a child element在鼠标悬停（悬停）时，显示和隐藏（切换）子元素
【发布时间】：2015-03-06 11:33:31
【问题描述】：

有多个具有公共类的 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

【问题讨论】：

首先，this.id 是一个字符串，所以你不能在它上面调用 jQuery 方法。您应该使用$(this) 来引用引发事件的元素。最后，如果元素被隐藏了，怎么能悬停再次显示呢？
除非您在未显示的地方声明了$target，否则您将成为The Horror of Implicit Globals 的牺牲品。
@RoryMcCrossan：谢谢。抱歉错字。我现在已经修好了。
我不明白...投反对票的理由是什么？
我也不明白。您正在尝试并遇到代码和逻辑问题。我想我们是来帮助你的！

标签： javascript jquery html css

【解决方案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.

【讨论】：

谢谢。但它不适用于嵌套的 DIV？例如：<div id="aa" class="zz"> <div id="a1"> <div id = "im1"> 当悬停在aa 上时，我想隐藏im1。然后在悬停在bb 上时隐藏im2。见jsfiddle.net/n3syhn67/10
@Fergoso：请查看更新后的答案。我已经包含了新的演示。
看起来不错。但我的问题是如何通过 div 隐藏。我如何隐藏嵌套的 DIV 而不是 $(this).find('img').hide();
@Fergoso：请再次查看更新的代码和演示。我使用find() 来选择ID 以im 开头的任何子div。
请投票，这样我的问题就没有反对票了。我认为我的问题不值得投反对票。谢谢。

【解决方案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/

【讨论】：

【解决方案3】：

更新了您的代码。希望对您有所帮助:)

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

使用

target = $(this);

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

       .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

【讨论】：

我没有投反对票，但由于隐藏/显示逻辑的问题，这仍然不起作用。
知道了...我想这就是 OP 想要的！
如果我需要隐藏一个 div 怎么办？见jsfiddle.net/n3syhn67/8如何隐藏有图片的DIV？
只需删除.find("img") 表达式。但是那样你的代码就没有意义了。你怎么能mouseenter 一个隐藏的 div... 除非你使用不透明度
$(this) 隐藏所有内容。我只想隐藏带有图像的 div。所以背景矩形应该始终可见。