<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//触发class = c 的点击事件
$(".c").click(function(){
checkDiv($(this));
});
//给DOM绑定点击事件
$(document).bind('click',function(e){
//获取当前点击元素的class
var v_id = $(e.target).attr('class');
//如果class != c 隐藏DIV
if(v_id != 'c'){
$("#show").hide();
}
})
});
//显示被隐藏的DIV
function checkDiv(obj){
//获取当前点击的位置
var offset = obj.offset();
//给要显示的DIV设置左边距
var left = offset.left;
var intleft = parseInt(left) + 15;
//给要显示的DIV设置上边距
var top = offset.top;
var inttop = parseInt(top) +15;
$("#show").show();
$("#show").css({
"background-color":'#33ee33',
"position":'absolute',
"z-index":10,
"top":inttop,
"left":intleft
});
}
</script>
<div id="big">
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
</div>
<div id="show" style="display:none;border:1px solid red;">
要显示的内容
</div>
</div>
</body>
</html>
分享到：
相关推荐
jQuery 实现鼠标移动出现提示信息 jQuery 是一个流行的 JavaScript 库，广泛应用于 Web 开发中。今天，我们将讨论如何使用 jQuery 实现鼠标移动出现提示信息的功能。 标题解析 标题“jQuery 实现鼠标移动出现提示...
当需要向用户显示提示信息，引导他们如何输入或理解输入字段的目的时，WPF提供了多种方式来实现这一功能。本文将深入探讨WPF中的Text提示信息，包括Watermark、Hint、Placeholder和Validation。 1. **Watermark...
### 如何修改用户登录Linux的提示信息 在Linux操作系统中，用户登录时会看到一系列的提示信息，这些信息包括但不限于系统版本、内核版本、欢迎信息等。有时，管理员可能需要根据实际需求来定制这些登录提示信息，...
在某些情况下，我们可能希望在用户将鼠标悬停在CEdit控件上方时，能够自动显示一些额外的提示信息，比如帮助文本或特定的说明。这种功能可以通过重载CEdit类来实现，增加自定义的行为。 首先，我们需要创建一个新的...
本文将详细讲解如何在H5中设置输入框的提示信息，以及与之相关的源码和工具应用。 一、HTML5输入框的基本结构 在HTML5中，输入框通常使用`<input>`标签创建，例如： ```html 请输入您的姓名"> ``` 这里的`type=...
"为控件添加提示信息"是提升用户体验的一种常见方法。在Windows应用程序开发中，`ToolTipCtrl`是一个常用的类，用于创建并管理显示在控件上方的小型提示窗口，通常用来显示用户将鼠标悬停在控件上时的简短帮助信息。...
Visual C++源代码 9 如何为控件添加提示信息框Visual C++源代码 9 如何为控件添加提示信息框Visual C++源代码 9 如何为控件添加提示信息框Visual C++源代码 9 如何为控件添加提示信息框Visual C++源代码 9 如何为...
在这个主题中，我们将深入探讨如何使用 jQuery 来实现文本框中的自动提示信息功能。 首先，`jQuery` 是一个轻量级的 JavaScript 库，它简化了 JavaScript 的DOM操作、事件处理和动画效果。对于“自动在文本框提示...
在探讨如何仅使用CSS实现动态提示信息之前，我们先来理解一下这个概念的基本含义和应用场景。动态提示信息，通常指的是当用户将鼠标悬停在某个元素（如链接、按钮等）上时，会弹出一个包含额外信息的小窗口或气泡，...
在网页设计中，提示信息是用户体验的重要组成部分，它帮助用户理解页面元素的功能和内容，特别是在交互性较强或者图像丰富的网站中。"title"和"alt"属性是HTML中用于提供这种提示信息的关键元素。 首先，`title`...
作者在本着尽量提高汉化效率和汉化质量的前提下，采用了自动、半自动提取与自动、人工汉化相结合的方法，编写了这一集提取、汉化、建立等功能为一体的永久汉化英文软件提示信息（含帮助信息、多级菜单提示信息、...
在本项目"jQuery CSS3实现动态提示信息条.zip"中，我们主要探讨如何利用JavaScript库jQuery结合CSS3技术创建一种动态、美观的提示信息条，适用于网页中的表单提交反馈。这种提示信息条的设计旨在提升用户体验，通过...
在Vue2.x版本中，开发者可以创建各种自定义组件来满足项目需求，其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息组件"就是这样一个专门用于在用户与界面交互时提供额外信息的组件。 该组件的...
【标题】：“TT随笔五 - Nutz自定义视图以及提示信息的统一管理” 这篇博客文章主要探讨了如何在Nutz框架中实现自定义视图（views）以及如何进行提示信息的统一管理。Nutz是一款轻量级的Java开发框架，它提供了包括...
一个小的js注册页面，运用了正则表达式会根据你填写的内容判断，然后给出提示信息
标题中的“输入框提示信息”通常指的是在网页或应用程序中，用户输入数据时显示的辅助文本，也称为placeholder或提示文本。这些提示信息为用户提供了一种直观的方式，了解输入框预期接收哪种类型的数据，比如“请...
用JavaScript实现，在表单的文本框中添加提示信息有助于理解表单的内容和目的。
常见的出错提示信息 C学习资料收集 C学习资料收集
js 特效 html 特效 鼠标导出提示信息 js 特效 html 特效 鼠标导出提示信息
在UGUI中，实现鼠标悬停提示信息是一种常见的交互设计，可以提高用户体验，让用户更加直观地了解UI元素的功能或状态。 首先，要实现鼠标悬停提示信息，我们需要使用Unity中的`EventSystem`、`CanvasGroup`和`Text`...