本文介绍了一种使用jQuery实现的鼠标悬停显示详细信息的方法。通过为图片元素添加mousemove和mouseleave事件监听器，当鼠标悬停在图片上时会在相应位置显示包含alt属性文字的提示框。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="鼠标悬停显示详细信息.aspx.cs" Inherits="鼠标悬停显示详细信息" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('img').mousemove(function (e) {
$('#divshow').show();
$('#divshow').text($(this).attr('alt')).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();
//e.pageX 鼠标的位置
//css({ top: (e.pageY + 5), left: (e.pageX + 5) }) 这一句是给div 定位的，所以一定要有样式：position:absolute 绝对定位
});
$('img').mouseleave(function () {
$('#divshow').hide();
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img alt="大家好" src="images/0.jpg" />
<img alt="你好" src="images/1.jpg" />
<img alt="哈喽" src="images/2.jpg" />
<img alt="csdn" src="images/3.jpg" />
<img alt="床上等你" src="images/林志颖.jpg" style="height: 137px; width: 119px" />
</div>
<div id="divshow" style="border: 1px solid red; width:100px; position:absolute; display:none"></div> <%--position:absolute;一定要写上这一句--%>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
