悬停显示 DIV，鼠标离开隐藏答案

【问题标题】：Hover to show a DIV, mouseleave to hide悬停显示 DIV，鼠标离开隐藏
【发布时间】：2014-01-10 23:19:00
【问题描述】：

我有一个 DIV，我想在鼠标悬停时显示它，在鼠标离开时隐藏它。

HTML：

<div id="test">TESTING</div>

CSS：

#test {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  display: none;
  background-color: #F00;
}

JS（假设我使用 jQuery）：

$('#test').hover(function() {
  $(this).fadeIn();
});
$('#test').mouseleave(function() {
  $(this).fadeOut();
});

但它没有响应，也没有 JS 错误。我想我错过了一些愚蠢的事情。谁能给我点灯？

这里是JSFiddle

【问题讨论】：

因为元素被隐藏了......没有鼠标悬停在它上面
您希望如何在隐藏元素上处理鼠标事件？

标签： jquery html css

【解决方案1】：

也许你可以做这样的事情（显示一个空格）：

HTML：

<div id="test" width="100px" height="100px"><span style=font-size:100px;">&#20;</span><div id="child">TESTING</span></div>

JS：

$('#test').hover(function() {
  $(this).find('#child').fadeIn();
});
$('#test').mouseleave(function() {
  $(this).find('#child').fadeOut();
});

CSS：

 #child {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        display: none;
        background-color: #F00;
    }

FIDDLE

【讨论】：

几乎，但鼠标悬停效果仅在文本上激活。既然$('#test')附加了hover()事件，为什么整个DIV没有悬停效果？（在 Chrome 上测试）
我已经更新了我的答案以及小提琴。看看这是不是你的意思。
差不多。 DIV 默认占据全宽。我将 DIV 设置为100px 宽度。见：jsfiddle.net/shivanraptor/aKAq8/4
旁注： HTML 属性没有单位（没有px）并且不需要100px的字体大小。

【解决方案2】：

Hover 有两个功能，一个是悬停在里面，一个是悬停在外面。代码：

$('#test').hover(function() {
  $(this).fadeIn();
},function() {
  $(this).fadeOut();
} );

但是..您不能将鼠标悬停在未显示的内容上...

【讨论】：

或 $('#test').hover(function() {$(this).fadeToggle()}); 但仍无法解决逻辑问题的 OP 问题

【解决方案3】：

您当前的方法根本行不通。该元素默认是隐藏的，因此无法在页面上用鼠标找到。

从您的 CSS 代码中删除 display:none; 以使其正常工作，或者如果您不希望它在悬停时不那么明显，可以将其不透明度设置为低于 1.0。在这种情况下，您需要使用$('#test').fadeTo(400, 1.0); 之类的东西在悬停时将其不透明度设置为 1.0。

【讨论】：

【解决方案4】：

由于您无法悬停隐藏元素，因此我建议您使用 CSS Transitions 的不透明度，为了使其看起来更流畅，您还可以尝试使用 z-index 找出一些东西来改变您想要的行为。

箍的想法会有所帮助，祝你好运

【讨论】：

【解决方案5】：

你需要执行命令首先显示元素，因为它是隐藏的。

您可以使用按钮，先显示元素，然后隐藏或显示它！

你的代码没问题，但display: none; 不会让它工作。这就是为什么您需要更改它或者您需要在其他可用元素上运行代码的原因。

所以你的代码会是这样的：

#test {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: #F00;
}

HTML 代码如下：

<div id="test">TESTING</div>

jQuery 将是：

$(document).ready(function () { // were you missing this too?
  $('#test').hover(function() {
    $(this).fadeIn();
  });
  $('#test').mouseleave(function() {
    $(this).fadeOut();
  });
}

【讨论】：

糟糕，这会影响设计师的布局设计。设计师希望将鼠标悬停在 DIV 上以使其显示出来。（ps.我设置了在onLoad期间执行的jQuery代码，因此省略了$(document).ready这个东西。

【解决方案6】：

首先，感谢大家的意见。

这是我最终得到的解决方案：

在@Afzaal Ahmad Zeeshan 的提醒下，我放弃了使用display: none。相反，我使用opacity。这使得 CSS 有点复杂，因为必须考虑跨浏览器的兼容性。

这是修改后的 CSS（HTML 保持不变）：

#test {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    filter: alpha(opacity=0); /* Legacy IE 5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* Naughty IE8 */
    -khtml-opacity: 0; /* Safari 1.x */
    -moz-opacity: 0; /* Firefox */
    opacity: 0; /* modern browsers */
    background-color: #F00;
}

这里是修改后的 JS：

$('#test').hover(function () {
    $(this).fadeTo(400, 1);
    // $(this).animate({opacity: '1'}, 400);
});
$('#test').mouseleave(function () {
    $(this).fadeTo(400, 0);
    // $(this).animate({opacity: '0'}, 400);
});

请注意，注释掉的对也可以工作。我首先担心跨浏览器问题，因为我使用 jQuery 来更改不透明度。不过，这个question 打消了我的顾虑。上面使用的功能是跨浏览器的。

最后，这是jsFiddle 演示。

【讨论】：