javascript - 多次使用鼠标悬停事件不起作用？

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/关闭图标现在只有一个占位符方 block ，但它可以工作。

谢谢!

Answer 1

这是css的特异性。当您执行 fadeOut 时，它会将 display:none 的内联样式添加到元素中，即使您添加了类也没有关系，因为内联样式会覆盖规则。通常，使用 mouseenter 而不是 mouseover 会更好，因为 mouseover 事件会冒泡(在代码中尝试使用 mouseover 你会看到元素只会在您移动鼠标时显示，甚至在关闭后以及您没有将鼠标悬停在文本上时显示)。另请注意，您每次都在鼠标悬停时添加 permHover 类，这是不需要的，因为您永远不会删除它们。同样，您不需要使用动画，添加不透明度对您的情况没有任何影响。

尝试:

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

Demo