Question

我有一个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

Answer 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

Answer 2

Hover有2个功能，一个悬停时，一个悬停时。代码：

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

但是......你不能在没有显示的东西上盘旋......

Answer 3

您目前的做法根本无法奏效。默认情况下隐藏元素，因此无法在页面上找到鼠标。

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

Answer 4

由于你不能悬停一个隐藏的元素，我建议使用CSS Transitions的不透明度，为了使它看起来平滑，你也可以尝试使用改变你想要的行为的z-index来解决问题。 / p>

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

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

Answer 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演示。

悬停显示DIV，mouseleave隐藏

6 个答案: