Show text on hover using just JS

问题

I tried a CSS solution but won't work (I believe this is a bug with the software or server I'm using). Now looking for java solution.

Put simply, I wish text to display on hover.

Here's what I've come up with but it won't work (I'm a noob)....

<DIV class="spire-menu">
    <DIV class="menu-item">Hello1</DIV>
    <DIV>Hello2</DIV></DIV>

The plan is to have Hello2 displayed perminantly. Hello1 will only display on hover.

$(".spire-menu").hover(function () {
    $(this).find('.menu-item').show();
}, function () {
    $(this).find('.menu-item').hide();
});

回答1:

CSS is better to use instead of JQuery. But if it doesn't work, here is the JQuery solution

<div class="spire-menu">
    <DIV class="menu-item" style="display:none;">Hello1</DIV>
     <DIV style="position:absolute;top:25px;">Hello2</DIV>
</div>

jQuery:

$(function(){
    $(".spire-menu").hover(function(){
      $(this).find(".menu-item").fadeIn();
    }
                    ,function(){
                        $(this).find(".menu-item").fadeOut();
                    }
                   );        
});

Here's the working Demo

Hope it will work for you.

来源：https://stackoverflow.com/questions/17626952/show-text-on-hover-using-just-js