Question

我正在尝试对某些文字执行悬停效果。当我将鼠标悬停在它上面时，我希望文本显示为关闭框。当我点击关闭框时，我显然希望它关闭，直到我再次将鼠标移到它上面并再次显示它。

我能够显示悬停文本一次，但是在第一次关闭它之后，它就不会再回来了。我不确定出了什么问题......任何帮助都会非常感激。我一般都是jquery / javascript的新手，所以我可能会遗漏一些非常明显的东西！

<div class ="closethis" id="one">
   Text 
        <div id="two"> 
            <ul> Hover text <div class="close"></div> </ul>                
</div>

以上是基本设置，这是我的javascript：

$("#one").on("mouseover", function() {
  $("#two ul").addClass('permhover');
});

$('.closethis').hover(function(){
$(this).find('.close').animate({opacity:1},100)
    })                
    $('.close').click(function(){$(this).parent().fadeOut('slow');});

对于css设置和jsfiddle，在这里：http://jsfiddle.net/mmrVU/65/现在只有一个占位符方块用于关闭图标，但它可以工作。

谢谢！

Answer 1

这是css的特异性。执行fadeOut时，它会向元素添加内联样式display:none，即使您添加类也无关紧要，因为内联样式会覆盖规则。通常最好使用mouseenter代替mouseover，因为mouseover事件会冒出来（在代码中尝试使用鼠标悬停，您会看到当您移动鼠标时该元素会显示出来甚至在关闭之后，当你没有徘徊文本时）。另请注意，每次鼠标悬停时都会添加permHover类，因为您永远不会删除它们。同样，您不需要使用动画，添加不透明度也不会对您的情况产生任何影响。

尝试：

$("#one").on("mouseenter", function () {
    $("#two ul").fadeIn('slow');
});

<强> Demo

Answer 2

fadeOut()将显示设置为无，但animate()不会更改，因此请使用fadeIn()
使用mouseenter代替hover，因为鼠标离开时也会调用相同的函数
您需要在permhover元素

尝试

$('.closethis').mouseenter(function () {
    $(this).find('.permhover').stop(true, true).fadeIn()
})
$('.close').click(function () {
    $(this).closest('.permhover').stop(true, true).fadeOut('slow');
});

演示：Fiddle

Answer 3

您在关闭时将不透明度设置为0。您需要将其设置回100％。

多次使用Mouseover事件不起作用？

3 个答案: