`
yangzhichao
  • 浏览: 13416 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
最近访客 更多访客>>
admin_gwx
社区版块
存档分类

纯CSS的TIP实现

CSS 
阅读更多
<html>
<head>
<style>
.tipable {
  position:absolute;
color: #0000cc;
text-decoration: none!important;
font-size: 12px;
}
.tipable:hover {
background: none;
}

.tipable span {
display: none;
}

.tipable:hover span {
  display: block;
  position:absolute;
  border:1px solid #640000;
  background: #FFFFCC;
  color:#000;
  padding:5px;
  left:20px;
  top:20px;
  white-space:nowrap;
}
</style>
</head>
<body>
<a href="javascript:void(null)" class="tipable">查看提示
<span>这是提示!</span>
</a>
</body>
</html>
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯CSS3实现鼠标滑过tip提示框动画特效源码.zip

    【标题】"纯CSS3实现鼠标滑过tip提示框动画特效源码.zip"是一个压缩包，其中包含了使用纯CSS3技术实现的一种鼠标悬停时显示tip提示框的动态效果的源代码。这种特效通常用于增强网页的交互性，提供用户在鼠标指针经过...

    完全CSS写的鼠标悬停tip效果

    标题中的“完全CSS写的鼠标悬停tip效果”指的是在网页设计中使用纯CSS实现的一种交互效果，当用户将鼠标指针悬停在特定元素（如链接）上时，会显示一个提示信息（tip）。这种效果可以增强用户体验，提供额外的信息而...

    纯CSS3实现自定义Tooltip边框涂鸦风格的教程

    这是一款用纯CSS3打造的自定义Tooltip边框的应用，之前我们讨论过如何用CSS3来实现不同样式的Tooltip，今天的这款Tooltip却可以用CSS3来自定义边框，边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框...

    纯css实现（无脚本）Html指令式tooltip文字提示效果

    但我们的目标是实现纯CSS版本，所以我们需要找到一种方法在没有脚本的情况下完成相同的功能。 为实现这一目标，我们设定了以下期望： - **不用JavaScript**：整个Tooltip的生成和行为完全由CSS控制。 - **不添加...

    纯css实现漂亮又健壮的tooltip的方法

    通过上述介绍，我们可以看到，使用纯CSS实现漂亮且健壮的tooltip并不是一件特别复杂的事情，但要实现效果好、兼容性佳并且用户体验出色的tooltip，需要对CSS的各个方面都有较深的理解和应用。此外，为了美观和用户...

    js中的tip提示信息

    使用纯CSS实现 对于简单的提示信息，可以仅使用CSS来实现。这种方法适用于固定位置的提示信息，不涉及复杂的动态效果。例如，可以使用伪元素`::before`或`::after`来创建箭头指示器。 #### 2. 使用JavaScript和CSS...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...

    css实现流程导航效果(三种方法)

    ::tip 使用纯css线上 流程导航效果。 本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip-path: polygon（），直接画出一个三角 唯一一点...

    纯CSS 链接悬停提示效果代码

    总的来说，纯CSS链接悬停提示是一种高效且易于实现的用户交互增强技术，它可以提高用户的导航体验，帮助用户快速理解链接的目的。通过理解和应用这样的CSS技巧，开发者可以创建更具吸引力和易用性的网页。

    jquery title提示效果,jquery tip提示效果

    6. **插件使用**：`jquery.tip.js`可能是一个预封装的jQuery插件，用于方便地实现提示效果。使用时，需要先引入jQuery库，然后引入插件，最后调用相应的插件方法，如`$('selector').tip(options)`。 7. **示例代码*...

    怎么用纯CSS制作带小三角的tooltip提示框

    以上的效果完全是用 css 来实现的，那么是怎么实现的呢？ 我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。 通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。  ...

    下拉列表中tip

    1. 使用纯CSS：通过伪元素（如`:before`或`:after`）和`content`属性，可以创建静态的提示文本。但这种方法通常限制了提示的动态性和交互性。 2. JavaScript插件：许多库和框架提供了现成的下拉提示解决方案，例如...

    CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)

    1. 纯CSS Tooltip 　许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性，比如data-tooltip=…。然后你就可以在你的CSS...

    js+html5实现半透明遮罩层弹框效果

    CSS样式是实现半透明遮罩层的关键。通过使用rgba颜色值，可以控制背景颜色的半透明效果。其中rgba中的最后一个参数0.5代表透明度为50%，即半透明效果。示例CSS如下： ```css .tip { text-align: center; position:...

    纯JS半透明Tip效果代码

    标题“纯JS半透明Tip效果代码”表明了文章的核心内容是关于如何使用纯JavaScript实现带有半透明效果的提示（Tip）功能。描述中提到，作者是依据一个透明功能类库自我编写的半透明Tip效果代码，这暗示了编写这些代码...

    js+html5实现半透明遮罩层弹框效果.docx

    - 解决方案：确保弹框的`&lt;div&gt;`容器使用纯白色背景（如`#ffffff`），而不是透明背景。 - 示例代码： ```css .collectSucc { background-color: #ffffff; } ``` 2. **半遮罩层内部内容无法上下滑动**： - ...

    Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

    问题还有，由于tip的显示效果没有用到任何图像，都是纯的CSS，所以里面用CSS实现的三角形在IE6下是无法工作的，会显示一块有色区域，很丑，所以我就想动手改它一下。先上一张对比图好了： js方面的代码肯定是没问题...

Magicbox
Global site tag (gtag.js) - Google Analytics