Question

所以我尝试了类似的东西，将鼠标悬停在文字上，旁边出现了一些内容：

$('.lang1').mouseenter(function() { 
        $('.lang1 span').fadeTo('fast', 1);
    });

$('.lang1').mouseleave(function() {
        $('.lang1 span').fadeTo('fast', 0);
    });

但是一旦我将鼠标移到它上面，它仍然会出现，非常微弱，但它是可见的。它完全按照预期工作，但它不会完全失去它的不透明性，你必须继续盘旋并将鼠标从它上移开以完全失去它的不透明度。

有人有建议吗？

CSS：

span {
    opacity: 0;
}

HTML：

<li class="lang1">HTML     <span>Pretty good at</span></li>

Answer 1

我只是使用fadeIn（'fast'）和fadeOut（'fast'）来获得淡入淡出效果，然后使用回调来隐藏元素。像这样：

$('.lang1').mouseleave(function() {

        $('.lang1 span').fadeOut('fast', function() { $(this).hide(); });
});

我认为更简单的替代方法是将CSS更改为display:none;并让jQuery在鼠标事件触发时处理不透明度$ ('.lang1 span').fadeOut('fast');

Answer 2

为什么不使用fadeToggle？

$('.lang1').hover(function() {
  $(this).find("span").fadeToggle("fast");
});

.fadeTo（'fast'，0）无法正常工作？ - jQuery

2 个答案: