使用JS显示悬停的文字 [英] Show text on hover using just JS
本文介绍了使用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();
}
);
});
Hope it will work for you.
这篇关于使用JS显示悬停的文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文