<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
<!-- 引入jQuery -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function (e) {
$("#tooltip")
.css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })
});
});
//]]>
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>
分享到：
相关推荐
本文实例讲述了jQuery实现的超链接提示效果。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title>...
本文实例讲述了JQuery实现超链接鼠标提示效果的方法。分享给大家供大家参考。具体分析如下： 浏览器其实已经自带了超链接提示，只需在超链接中加入title属性就可以了。但是这个提示效果的响应速度是非常缓慢的，大概...
总结来说，这个项目是关于如何在ASP.NET环境中利用Xheditor和jQuery-1.11.0实现图片上传功能的一个实例。通过理解Xheditor的配置、jQuery的异步请求以及ASP.NET后端的文件处理，我们可以构建一个高效、用户友好的富...
3.3 案例研究——某网站的超链接和图片提示效果 3.4 小结 第4章 jQuery中的事件和动画 4.1 jQuery中的事件 4.1.1 加载DOM 4.1.2 事件绑定 4.1.3 合成事件 4.1.4 事件冒泡 4.1.5 事件对象的属性 4.1.6 移除事件 4.1.7...
总结来说，通过本文的实例，我们可以了解到创建和使用jQuery自定义选择器的方法。通过定义一个符合特定需求的函数到jQuery的`$.expr[':']`对象，我们可以方便地扩展jQuery的选择器，使它能够根据复杂的条件选取元素...
【标题】：“仙剑网站实例”是一个以中国古典神话元素为主题的网页设计示例，它包含了丰富的视觉效果和交互功能，旨在展示如何将游戏文化与现代网页技术相结合，为用户提供一个既美观又互动的浏览体验。 【描述】：...
- **TextBox（文本框）**：基础输入框，支持验证、提示和水印效果。 - **NumberBox（数字框）**：限制输入为数字，可设置步长、范围等。 - **Slider（滑块）**：通过滑动条选择数值，可设置范围和步长。 - **...
- **显示多种内容类型**：jQuery.barrager.js不仅能够显示文字，还支持展示图片和超链接，极大地扩展了弹幕内容的表现形式，使得网页弹幕不再局限于纯文本。 - **自定义参数**：用户可以根据需求调整弹幕的速度、...
### 4、超链接提示效果 jQuery 可以轻松实现对超链接的鼠标悬停提示效果。例如，当鼠标悬停在链接上时，显示链接的目标URL： ```html 示例链接 $(document).ready(function(){ $('.tooltipLink').hover( ...
在本实例中，我们将深入探讨ASP开发中的几个关键知识点，包括窗口和页面的样式设置、鼠标单击链接的样式、添加窗口关闭按钮、日期选择器、全屏显示网页以及关闭IE浏览器时的提示对话框处理。 1. **窗口及页面设置**...
例如，一个超链接`<a>`标签的属性包括`href`（指向链接地址）、`title`（鼠标悬停时显示的提示文本）、`target`（链接打开的目标窗口或框架）、`id`（元素的唯一标识符）等。 在jQuery中，我们可以利用`.each()`...
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现动态添加表格的`<tr>`和`<td>`功能。这个功能通常用于网页上的数据展示，特别是在用户交互时需要实时更新表格内容的情况，例如筛选、搜索或加载更多数据。 ...
摘要:脚本资源,HTML,无刷新换肤,切换产品图片 Ajax无刷新换风格，无刷新切换不同颜色的产品图片，其实这是一套超不错的网页前端设计...这是锋利的JQuery一书附录中的一个实例，非常不错，前端开发的Fans们可不要错过。
它允许我们在网页中添加文本、图像、视频等多媒体元素，并通过超链接将不同页面相互连接。在本压缩包中，"Html特效（经典）"很可能是包含了一系列经典且实用的HTML效果的示例代码。这些效果可以提升网站的用户体验，...
2. **错误处理**：增加异常处理机制，如当 URL 不合法或格式不正确时给出适当的提示或处理。 3. **性能优化**：对于大型应用，可以考虑使用更高效的算法或利用现有的库来提高性能。 4. **安全性考虑**：在处理...
例如，`<title>`标签定义了浏览器顶部显示的标题，`<h1>`到`<h6>`定义了不同级别的标题，`<p>`用于创建段落，`<img>`引入图片，`<a>`则用于创建超链接。HTML通过这些标签将文本内容和多媒体元素组织成有条理的结构。...
- **动态效果**：实现动态效果，如弹出窗口、提示框等。 - **表单验证**：通过JavaScript增强表单验证功能。 ##### 14. 使用JavaScript库和Ajax（Using JavaScript Libraries and Ajax） - **JavaScript库**：介绍...
在本文中，我们将深入探讨JavaScript在创建流行特效中的应用，通过分析标题和描述中提到的一些具体实例，来了解如何利用JavaScript来增强用户体验。 首先，"鼠标移过去图片会变的超链接.txt"这一描述揭示了...