Question

I want to show a certain element (em) on link hover.

I came up with this (through online tutorials).

<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>

But .animate({opacity: “show”} gives me display:inline instead of display:block – as I’ve read around display:block should be a default behavior… so what is wrong?

Answer 1

Well you can give it css in your .css file or in your jQuery code:

$(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");
    });
});