Question

我已经使用Jquery代码淡出/淡出问题下方div中的描述性文本。问题？解决方案不是很优雅。这就是我所拥有的：

$("#home").mouseover(function() {
    $("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
    $("#homeText").fadeOut();
});

我知道有更好的方法可以做到这一点，我只是不确定它是什么。

Answer 1

你可以使用悬停，第一个功能将作用于“悬停在”，第二个功能将作用于“悬停”

文档位于：http://docs.jquery.com/Events/hover

$("#home").hover(function(){
    $("#homeText").fadeIn("slow");
},
function(){
    $("#homeText").fadeOut();
});

Answer 2

3行怎么样？

<script>

    $(function () {

        $('#home').hover(function() {
           $('#homeText').fadeToggle("slow");
        });

    });


    </script>

够优雅？

Answer 3

乔恩，很好的建议！为了更完整的解决方案，我用它作为一个起点。仅使用基本悬停来执行此操作仍然会让我对单个菜单项进行悬停调用。许多冗余代码。所以使用你的建议，我想出了这个：

$('.topMenu').hover(function()
        {
        $('#_'+this.id).fadeIn("slow");
        },
        function ()
            {
        $('#_'+this.id).fadeOut();      
            });
});

所有菜单项都有topMenu类和ID。要显示的相应div与菜单项的id相同，只是前缀_ 例： ....

关于我们的东西！

...

谢谢！

Answer 4

$(function () {
    $('#home').hover(function() {
       $('#homeText').fadeIn("slow");
    });
    $('#home').mouseout(function() {
       $('#homeText').fadeOut("slow");
    });
});

Jquery鼠标悬停淡出（最佳实践）

4 个答案: