我在链接上使用鼠标悬停事件。我有2个版本的java脚本代码,第一个不能正常工作。悬停事件不会触发。但它发射的第二个版本。我不知道是什么让第一个版本无效。
以下是代码:
<script type="text/javascript">
/* http://www.alessioatzeni.com/wp-content/tutorials/jquery/simple-tooltip/index.html */
/* this is the first version
$(document).load(
function()
{
// Tooltip only Text
$(".popupTooltip").hover(
function()
{
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
},
function()
{
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}
).mousemove(
function(e)
{
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
}
);
}
);
*/
$(document).load(
$(".popupTooltip").hover(
function()
{
// Hover over code
var title = $('.popupTooltip').attr('title');
$('.popupTooltip').data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
},
function()
{
// Hover out code
$('.popupTooltip').attr('title', $('.popupTooltip').data('tipText'));
$('.tooltip').remove();
}
).mousemove(
function(event)
{
var mousex = event.pageX + 20; //Get X coordinates
var mousey = event.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
}
)
);
</script>
第一个版本是注释块。 我从www.alessioatzeni.com复制代码。
这是html部分:
<li>
<img src=\"$strImageLoc\" alt=\"Image\" width=\"210\">
<div class=\"one-fourth-image-shadow\"></div>
<h5>
$row[title]
</h5>
<a href=\"#\" class=\"popupTooltip\" title=\"$row[description]\">
More info...
</a>
</li>
当鼠标悬停在“更多信息...”上时,会显示一个弹出窗口。