使用JS显示悬停的文字 [英] Show text on hover using just JS

问题描述

我尝试过一个CSS解决方案，但不会工作（我相信这是我使用的软件或服务器的一个错误）。现在寻找java解决方案。

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

这是我的已经提出，但它不会工作（我是一个noob）....

 < DIV类= 尖顶菜单 > 
< DIV class =menu-item> Hello1< / DIV> 
< DIV> Hello2< / DIV>< / DIV> 
  

计划是让每个用户都显示Hello2。 Hello1只会在悬停时显示。

  $（。spire-menu）。hover（function（）{
 $（this）.find（'。menu-item'）。show（）; 
}，function（）{
 $（this）.find（'。menu-item'）。hide （）; 
}）; 
  

解决方案

CSS最好用来代替JQuery。但如果它不起作用，这里是JQuery解决方案

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

jQuery：

 < code $函数（）{
 $（。spire-menu）。hover（函数（）{
 $（this）.find（。menu-item）。 fadeIn（）; 
} 
，function（）{
 $（this）.find（。menu-item）。fadeOut（）; 
} 
 ）; 
}）; 
  

以下是工作示范

希望它对您有用。

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

解决方案

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.

这篇关于使用JS显示悬停的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！