Question

我想在链接悬停时显示某个元素（em）。

我想出了这个（通过在线教程）。

<script type="text/javascript">
$(window).load(function() {
    $("ul.slidebtns li a").hover(function() {
        $(this).next("em").animate({opacity: "show"}, "fast");
    }, function() {
        $(this).next("em").animate({opacity: "hide"}, "fast");
    });
});
</script>

但是.animate（{opacity：“show”}让我显示：内联而不是显示：阻止 - 因为我已经阅读过显示：阻止应该是默认行为......所以有什么问题？

Answer 1

display:block是fade函数的默认值，animate默认情况下并不是默认值。您的元素有哪些样式？可能是您已将它们定义为使用内联显示。

修改

使用以下CSS规则会发生什么？

em {display: block;}

或更准确（这是你的结构）：ul.slidebtns li a em {display:block;}？

Answer 2

你可以在你的.css文件或jQuery代码中给它css：

$(window).load(function() {
    $("ul.slidebtns li a").hover(function() {
        $(this).next("em").css({ display: "block", opacity: 0 }).animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("em").animate({opacity: "hide"}, "fast");
    });
});

Answer 3

而不是使用animate({opacity: "show"}, "fast");使用animate({height: "show", width: "show"});。希望这会有所帮助。

.animate opacity：show - 需要显示：block;而不是显示：内联;

3 个答案: