使用JS显示悬停文字

我尝试了一个CSS解决方案，但不起作用（我相信这是我使用的软件或服务器的错误）。现在寻找java解决方案。使用JS显示悬停文字

简单地说，我希望文字显示在悬停。

下面是我想出的，但它不会工作（我是小白）....

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

的计划是有Hello2 perminantly显示。 Hello1只会在悬停时显示。

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

来源

2013-07-13 Bainn

如果像[** this **]（http://jsfiddle.net/aZ2qY/）这样简单的东西不能工作，是什么让你认为jQuery会？ – adeneo

@adeneo：因为jQuery做所有事情。 – Blender

@Blender - 哦，忘了那部分，即使它很明显！ – adeneo

CSS最好用来代替JQuery。但是，如果它不能正常工作，这里是JQuery的解决方案

<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

希望它会为你工作。

来源

2013-07-13 04:53:15

伟大的工作@Shiju。只有我需要的修改是文本需要保持原来的位置，而不是与隐藏/显示上下颠簸。非常感谢你的帮助！ – Bainn

然后定位你的div。查看更新。此外，我已更新工作演示。你可以根据你的需要设置div的位置。 –

使用JS显示悬停文字

回答

相关问题