gpt4 book ai didi

javascript - 当鼠标悬停在文本上时,jquery 工具提示不出现

转载 作者:太空宇宙 更新时间:2023-11-04 05:21:14 24 4
gpt4 key购买 nike

我正在关注这个 tutorial添加一个简单的 jquery 工具提示。本教程使用三张图片构建工具提示背景,但我只想使用一张。现在,当我将鼠标悬停在某些文本上时,我正试图让工具提示出现。我不知道我是在犯一个简单的错误,还是代码没有意义。无论哪种方式,当我将鼠标悬停在文本上时,工具提示都不会出现。

这是我的脚本版本:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.toolTip').hover(
function() {
this.tip = this.title;
$(this).append(
'<div class="toolTipWrapper">'
+'<div class="toolTipPic">'

+this.tip
+'</div></div>'
);
this.title = "";
this.width = $(this).width();
$(this).find('.toolTipWrapper').css({left:this.width-22})
$('.toolTipWrapper').fadeIn(300);
},
function() {
$('.toolTipWrapper').fadeOut(100);
$(this).children().remove();
this.title = this.tip;
}
);
});
</script>

<style type="text/css">
.toolTip {}
.toolTipWrapper {
width: 175px;
position: absolute;
top: 20px;
display: none;
color: #FFF;
font-weight: bold;
font-size: 9pt;
}
.toolTipPic {
width: 175px;
background: url(tooltip.png) no-repeat;
}

</style>
</head>
<body>
<p class="toolTip" title="This is the tooltip text">Hover over me for tooltip </p>

</body>
</html>

最佳答案

在这一行:

$(this).find('.toolTipWrapper').css({left:this.width-22});

您将 left 属性设置为 p 标签的宽度,但您没有在 p 标签上设置宽度,因此它的宽度是页面的整个宽度。例如,当我厌倦了它时,它将左侧设置为“1247px”,它位于浏览器窗口的一侧。

关于javascript - 当鼠标悬停在文本上时,jquery 工具提示不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6514254/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com