jQuery悬停问题
jQuery悬停问题
提问于 2011-05-09 00:19:44
我试图让我的页面上的一个元素消失，并在用户单击另一个元素时重新出现。我的代码如下所示：
<script type="text/javascript">
$('.affordable').hover(function () {
$('#reason-a').toggle();
});
</script>
<span class="affordable">Affordable</span>
<span class="turnaround">Fast Turnaround</span>
<span class="communication">Communication</span>
<div id="reason-a">Affordable information</div>我希望用户能够停留在负担得起的类上，然后显示负担得起的信息。然后，当用户将鼠标悬停在单词上时，信息应该会消失。
非常感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-05-09 00:22:48
这是脚本实际设置的方式吗？您需要将该脚本放在onload处理程序中：
$(function(){
// Register your hover events here
});原因是绑定函数的元素还不存在，选择器返回一个空数组(所以实际上并没有绑定任何东西)。
切换方法在没有参数的情况下交替显示，而鼠标悬停方法作为鼠标输入和鼠标保留，只传入一个委托，所以我认为切换到单独的隐藏和显示功能的建议是不必要的。
Stack Overflow用户
发布于 2011-05-09 00:24:32
你应该喜欢这个
为#reason a添加css display none，这样它就不会在加载时显示
#reason-a{
display:none
}工作演示
http://jsfiddle.net/4xruD/
将代码也包装在document.ready上
$(document).ready(function() {
$(".affordable").hover(
function () {
$("#reason-a").show(); // this is mouse over
},
function () {
$("#reason-a").hide(); // this is mouseout
}
);
});Stack Overflow用户
发布于 2011-05-09 00:26:49
$(document).ready(function() {
$('#reason-a').hide();
$('.affordable').hover(
function () {
$('#reason-a').show();
},
function () {
$('#reason-a').hide();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5928662
复制相关文章
相似问题
腾讯云开发者
